Display different image on scroll in navbar

Question

I want to change the image displayed in navbar (under img src=) when scrolled down. However, the image isn't in a css class so I'm not sure how it could be done. Could you advise the best way to solve this? Should I put the image in a css class?

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

you can change img src. http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery — tech2017, May 10 '17 at 17:22

score 0 · Accepted Answer · answered May 10 '17 at 17:31

0

Access the DOM object of the img element and changes the src property to update the image.

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

answered May 10 '17 at 17:31

hungerstar

21,206
6
50
59

Thank you! it worked but there's a bug - imgEl isn't defined within the onScroll function. – Amy Wang May 16 '17 at 19:51
You must not have implemented like I did above. `imgEl` is defined outside of the definition of `onScroll` so `imgEl` is available inside of `onScroll`. – hungerstar May 16 '17 at 20:02
Hmm yeah I might have made a mistake – Amy Wang May 17 '17 at 20:41

Display different image on scroll in navbar

1 Answers1