Q&A
こちらのサイトを参考にしてヘッダーメニューの表示非表示をスクロールの向きによって切り替えたいのですが、非表示のときのclass="hide"が消えないです。
以下コードなのですが、どこが間違っているのでしょうか？
html
1<body> 2 <header class="header"> 3 ////コンテンツ 4 </header> 5 <div> 6 ////コンテンツ 7 </div> 8</dody>
jQuery
1var startPos = 0,winScrollTop = 0; 2$(window).on('scroll',function(){ 3 winScrollTop = $(this).scrollTop(); 4 if (winScrollTop >= startPos) { 5 if(winScrollTop >= 200){ 6 $('.header').addClass('hide'); 7 } 8 } else { 9 $('.header').removeClass('hide'); 10 } 11 startPos = winScrollTop; 12});
scss
1 .header{ 2 position: fixed; 3 top: 0; 4 transition: .5s; 5 width: 100%; 6 z-index: 999; 7 &.hide{ 8 transform: translateY(-100%); 9 } 10 }
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。