navbarのスクロールで異なる画像を表示

Question

スクロールダウンするとnavbarに表示される画像を変更したい（img src =）。しかし、画像はCSSクラスにはありませんので、どのように行うことができるのか分かりません。これを解決する最善の方法をアドバイスできますか？イメージをCSSクラスに入れるべきですか？

   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 

 
       <ul class="nav navbar-nav navbar-left"> 
 
        <li> 
 
        <img src="img/blacklogo.png" width="13% style="padding-top:5px" style="padding-top:0px" > 
 
      

Answer 1

アクセスimg要素のDOMオブジェクトと画像を更新するsrc性を変化させます。

(function (win, doc, undefined) { 
 

 
    var imgEl = document.querySelector('#header-img'), 
 
     nextSrc = 'http://placehold.it/1200x100/', 
 
     switched = false; 
 

 
    function onScroll(e) { 
 

 
    imgEl.src = nextSrc; 
 
    win.removeEventListener('scroll', onScroll); 
 

 
    } 
 

 
    win.addEventListener('scroll', onScroll); 
 
    
 
}(window, window.document));

body { 
 
    margin: 0; 
 
    min-height: 125vh; 
 
}

<header> 
 
    <img id="header-img" src="http://placehold.it/1200x100/fc0"> 
 
</header>