如何在向下滚动页面时更改图像？

Question

我有一个固定的导航栏，并希望更改徽标img时向下滚动以获得更好的对比度。我正在使用bootstrap。也许使用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);