html - 在导航栏中滚动显示不同的图像

Question

我想在向下滚动时更改导航栏中显示的图像(在 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>