在导航栏

Question

我想在向下滚动时更改导航栏中显示的图像（在img src =下）。但是，图像不在css类中，因此我不确定如何完成。你能建议解决这个问题的最佳方法吗？我应该把图像放在CSS课程中吗？

＆＃13;

＆＃13;

                <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"  > 
              

＆＃13;

＆＃13;

＆＃13;

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>