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

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);