teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

jsを追記しました

2021/10/28 11:11

投稿

free_teku
free_teku

スコア103

answer CHANGED
@@ -65,4 +65,56 @@
65
65
  padding-left: 51px;
66
66
  line-height: 6rem;
67
67
  }
68
+ ```
69
+
70
+ ```js
71
+ /* header-top.css */
72
+
73
+ $(function(){
74
+
75
+ let header = $('.header');
76
+ let Logo = $('.header-logo');
77
+ let item = $('.header-item');
78
+ let drawer = $('.drawer-nav');
79
+ let line = $('.line');
80
+ $(window).scroll(function(){
81
+ if($(this).scrollTop()>=100){
82
+ //$("#logo").attr("src", "")
83
+
84
+ //header-bgを白に変更
85
+ header.css('background','#fff');
86
+ //logoを変更
87
+ Logo.attr('src', '/img/sub-header-logo.png');
88
+
89
+ //aタグで囲った文字を黒に変更
90
+ item.find('a').css('color', '#000');
91
+ //ハンバーガーアイコンを黒に変更
92
+ $('head').append('<style>.line { background: #000; } </style>');
93
+ //$('head').append('<style>.drawer-hamburger-icon::after { background: #000; } </style>');
94
+ line.css('background-color','#000');
95
+ if (window.matchMedia( "(min-width: 1179px)" ).matches) {
96
+ drawer.css('background-color','transparent');
97
+ } else {
98
+ drawer.css('background-color','#fff');
99
+ }
100
+ // ドロワーの色を白に
101
+ } else {
102
+
103
+ // 画面がトップから100px以下の時は、上記と逆の処理を行う
104
+ header.css('background','transparent');
105
+ Logo.attr('src', '/img/top-header-logo.png');
106
+ item.find('a').css('color', '#fff');
107
+ // drawer.css('background-color','#000');
108
+ $('head').append('<style>.line{ background: #fff; } </style>');
109
+ //$('head').append('<style>.drawer-hamburger-icon::after { background: #fff; } </style>');
110
+ line.css('background-color','#fff');
111
+ if (window.matchMedia( "(min-width: 1179px)" ).matches) {
112
+ header.css('background-color','transparent');
113
+ drawer.css('background-color','transparent');
114
+ } else {
115
+ drawer.css('background-color','rgba(0,0,0,0.9)');
116
+ }
117
+ }
118
+ });
119
+ });
68
120
  ```