如何在向下滾動頁面時更改圖像？

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