CODEWITHSUNDEEP
jqueryheaderscrollgraphical-logo
user3134706
user3134706

Reputation: 11

Changing header logo on scroll down

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.

Upvotes: 0

Views: 2410

Answers (1)

RustyToms
RustyToms

Reputation: 7810

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);
  }
});

Upvotes: 1

Related Questions