上からスクロールした後の要素のスタイルを変更する

Question

上から下にスクロールするたびに、別のスタイルをヘッダーに適用しようとしています。基本的には、上にスクロールしてスタイル1を適用し、上にスクロールしない場合はスタイル2を適用します。

これを実現するにはwhileとforループを使用してみましたが、両方失敗しました。以下のjQueryの例は動作しましたが、何らかの理由でこの例ではありません。しかし、私はJavaScriptを学んでいるので、むしろjQueryよりもJavaScriptを使用したいと思います。

私はこのために何を使うべきかアドバイスしてくれますか？誰かが私の試みに間違ったことを教えてもらえますか？

ありがとうございました。まあ

// ATTEMPT 1 
 

 
var headerWrap = document.getElementById('header-wrap'); 
 
var h = headerWrap.scrollTop; 
 

 
function changeHeaderOpacity() { 
 
    "use strict"; // wtf is this? 
 
    while (h > 0) { 
 
     headerWrap.addClass('scroll-opacity-change'); 
 
    } 
 
    headerWrap.removeClass('scroll-opacity-change'); 
 
} 
 

 
// ATTEMPT 2 
 

 
/* 
 
var headerWrap = $('#header-wrap'); 
 
$(window).scroll(function() { 
 
    headerWrap.addClass('scroll-opacity-change'); 
 
    if($(this).scrollTop() <= 0) { 
 
     headerWrap.removeClass('scroll-opacity-change'); 
 
    } 
 
}); 
 
*/ 
 
/* 
 

 
// ATTEMPT 3 
 

 
var headerWrap = document.getElementById('header-wrap'); 
 
var h = headerWrap.scrollTop; 
 

 
function changeHeaderOpacity() { 
 
    "use strict"; // wtf is this? 
 
    if (h > 0) { 
 
     headerWrap.addClass('scroll-opacity-change'); 
 
    } else { 
 
    headerWrap.removeClass('scroll-opacity-change'); 
 
    } 
 
} 
 
*/

body{ 
 
    height:1000px; 
 
} 
 

 
#header-wrap{ 
 
    height:100px; 
 
    width:100%; 
 
    background:#0f0; 
 
} 
 

 
.scroll-opacity-change{ 
 
    background:#f00; 
 
}

<div id="header-wrap"> 
 

 
</div>

Answer 1

まず、あなたは、ウィンドウのスクロールを検出するためのリスナーを追加する必要があります。

var currentScroll = window.pageYOffset || document.documentElement.scrollTop; 
    if (currentScroll > lastScrollTop){ 
     // You are down scrolling 
    } else { 
     // You are up scrolling 
    } 
    previousScroll = currentScroll; 

決勝コード：

$(document).ready(function() { 
previousScroll=0 //this means we are starting from top 
$(window).scroll(function() { 
    var currentScroll = window.pageYOffset || document.documentElement.scrollTop; 
if (currentScroll > previousScroll){ 
    // Change header style cause you are down scrolling 
} else { 
    // Do something else? You are up scrolling anyway... 
} 
previousScroll = currentScroll; 
); 
}); 

$(document).ready(function() { 
$(window).scroll(function() { 
    //do the header styling using .style 
    }); 
}); 

は今、あなたはあなたはこれを使用して、次のことができ、あなたはスクロールダウンするか、されていない把握するいくつかの変数のスクロールログを保存する必要があります

私はこれが助けて欲しい、あなたのコメントを歓迎します。

Answer 2

idの代わりにclassを使用します。

<div class="header-wrap"> 

</div> 

と

$(window).scroll(function() { 
    $('.header-wrap').addClass('scroll-opacity-change');  
    if($(this).scrollTop() <= 0) { 
     $('.header-wrap').removeClass('scroll-opacity-change'); 
    } 
});