ページをスクロールダウンするときの画像の変更方法は？

Question

私は固定のnavbarを持っていて、より良いコントラストのためにスクロールするときにロゴimgを変更したいと思っています。私はブートストラップを使用しています。たぶんif文を使用していますか？

$('#mainNav').affix({ 
    offset: ({ 
     top: 100 
    }) 
}) 

Answer 1

イベントリスナーを使用します。

window.addEventListener("scroll",()=>{ 
    if(((window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0))>300){ 
     //replace image if scrolled more than 300 
    }else{ 
    //replace with other image 
}},false);