Changing header logo on scroll down

Question

Hi can someone give me a tip on how to create a similar header like http://www.gamespot.com/news/ has. I would like to have a changing header logo on scroll down. I'm thinking to create two headers and toggle between two in jquery.

Answer 1

You could either make two headers, or you could modify one. Either way, you just need to listen to the scroll event. On scroll, check to see if the window is scrolled all the way to the top or not, and put up the header you want for the situation you find.

If this was your header

<header>
  <!-- some stuff inside your header -->
</header>

Then your javascript would look something like this

$(window).scroll(function(){
  if ($(this).scrollTop() === 0 ){
    $('header').html(headerCode);
  } else {
    $('header').html(otherHeaderCode);
  }
});