Header changes as you scroll down (jQuery)

ID : 274392

viewed : 18

Tags : jqueryjquery





Top 5 Answer for Header changes as you scroll down (jQuery)

vote vote

95

It's not too hard, it's just a simple .scroll() event. I can't seem to do it in fiddle because of the way the panels are positioned Check EDIT!. But basically what you have is have a div on the top that is position: absolute so it's always on top, then use .scroll()

$("body").scroll( function() {     var top = $(this).scrollTop();     // if statement to do changes }); 

The scrollTop() method is used to determine how much the body has scrolled.

And depending on where you would like to change your header div, you can have your if statement do many things. In the case of the example you provided, it would be something like

if ( top > 147 )     // add the TechCrunch div inside the header else     // hide the TechCrunch div so that space is transparent and you can see the banner 

EDIT

Yay! I was able to make this fiddle to demonstrate the example! :)

Good luck!

vote vote

84

Old question but I recently ran into this problem and the accepted solution on here wouldnt work because the height of my div's weren't fixed, so in short here is the solution I came across.

JSfiddle: http://jsfiddle.net/Lighty_46/27f4k/12/

$(document).ready(function () {  var bluebutton = $('#blue_link').offset().top - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0));  var bluebuttonbottom = $('#blue_block_bottom').offset().top - $('#main_nav').height() - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0));  $(window).scroll(function (event) {     // what the y position of the scroll is         var y = $(this).scrollTop();      // whether that's below the top of the div         if (y >= bluebutton) {      // if so, ad the fixed class         $('.home_nav').addClass('blue_selected');  }      // whether you have passed the bottom of the div         if (y >= bluebuttonbottom) {      // if so remove the selected class         $('.home_nav').removeClass('blue_selected');          } else {      // otherwise remove it         $('.home_nav').removeClass('blue_selected'); }  }); }); 

SO basically,

  • $('#blue_link') was the top div I wanted to to trigger the class change
  • $('#blue_block_bottom') was the div I wanted to to trigger the class removal
  • $('#main_nav') was my fixed header

So when the bottom of my header reaches the top of the div, the class "blue_selected" is applied to ".home_nav" ..... then if the bottom of the div passes the bottom of the header the class "blue_selected" is removed from ".home_nav".

You will need to repeat this for each of your buttons with their respective div's

I have tested it in Chrome, Firefox and IE 10 to 8 (works in 8 but the fiddle breaks slightly).

Hope this helps, it probably isn't the best way to do it in all honesty and it probably has some errors in there somewhere but it was the only one I got working.

vote vote

72

Check out this Floating Divs

What you are looking is for is that you need to define a Div as floating Div and then it always stays on the page whenever you scroll. In Techcrunch they are having their headers in the Center top and so it always stays there

vote vote

62

Here's one idea

  • Bind to document.body.onscroll event
  • onscroll check for the scroll position. if is not at top, replace the image at the bar
  • if it as at top, display the other image
vote vote

56

$(window).on("scroll", function () {     if ($(this).scrollTop() > 100) {         $("#header").addClass("not-transparent");     }     else {         $("#header").removeClass("not-transparent");     } }); 

Top 3 video Explaining Header changes as you scroll down (jQuery)







Related QUESTION?