javascript - How to add css to a div once it hits the top of the page (when scrolling)? - Stack Overflow

I would like to make it so when user scrolls down and reaches a certain div, say #float, set that div to margin-top: 50px and position fixed, and if user scrolls back up undo those changes. It's hard to understand I know ))) If you go to this page and pay your attention to sidebar once scrolling up and down you will see what I mean.

As you scroll down 2nd advertisement scrolls with a page too.

How would I achieve same functionality with jQuery/CSS?

I would like to make it so when user scrolls down and reaches a certain div, say #float, set that div to margin-top: 50px and position fixed, and if user scrolls back up undo those changes. It's hard to understand I know ))) If you go to this page and pay your attention to sidebar once scrolling up and down you will see what I mean.

As you scroll down 2nd advertisement scrolls with a page too.

How would I achieve same functionality with jQuery/CSS?

• javascript
• jquery
• css

Share Improve this question Follow edited Dec 23, 2011 at 18:17 isNaN1247 18.1k1313 gold badges7474 silver badges119119 bronze badges asked Dec 23, 2011 at 17:53 IljaIlja 46.6k103103 gold badges289289 silver badges528528 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This is a way of doing it in jQuery.

This code is provided for example purposes only; there are almost certainly a handful of regularly-maintained jQuery plugins that will do this thing for you - check GitHub or DailyJS.

$(window).scroll(function() {
    var styledDiv = $('#styledDiv'),
        targetScroll = $('#float').position().top,
        currentScroll = $('html').scrollTop() || $('body').scrollTop();

    styledDiv.toggleClass('fixedPos', currentScroll >= targetScroll);
});

Here is a simple JSFiddle of the above in action.

Edit: Have now refactored this code to a more elegant solution.

Edit 2: Following an email I received about a question, I've updated the code above so that it also works in Firefox. As $('body').scrollTop() will not work in Firefox (See ments on the jQuery API page), we need to check both the html and body elements.

This is the relevant jQuery/JavaScript code use on that site.

  if (window.XMLHttpRequest) {
    var topGagStay = $("top-gag-stay");
    var isLoggedIn = $("profile-menu") ? true : false;
    var sidebarAdsTop = 1061 - 545;
    var signupBtnOffset = 60;
    var dockPos = 72;
    if (!isLoggedIn && !GAG.isReadOnly()) {
      sidebarAdsTop += signupBtnOffset
    }
    if (formMessageShown) {
      sidebarAdsTop += formMessageOffset
    }
    if (topGagStay) {
      if (document.documentElement.scrollTop > sidebarAdsTop || self.pageYOffset > sidebarAdsTop) {
        if (topGagStay.style.position != "fixed") {
          topGagStay.style.position = "fixed";
          topGagStay.style.top = dockPos + "px"
        }
      } else {
        if (document.documentElement.scrollTop < sidebarAdsTop || self.pageYOffset < sidebarAdsTop) {
          topGagStay.style.position = "";
          topGagStay.style.top = ""
        }
      }
    }
  }

Thank FireBug and http://jsbeautifier/ for the code (and 9GAG, of course).

I have tried the above answer by beardtwizzle and it worked fine. Also made it work for the case when the page is scrolled upto the bottom of the page.

see the working demo/tutorial here