一旦它到达页面顶部（滚动时），如何将css添加到div？

Question

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?

Answer 1

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 comments on the jQuery API page ), we need to check both the html and body elements.

Answer 2

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.org/ for the code (and 9GAG, of course).

Answer 3

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