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.