Question

I have a ‘back button’ that I would like to stick to the header until you scroll past a certain point (so I have it absolutely positioned but would like it positioned ‘fixed’ when you scroll past the header).

Kinda like the ‘GAMEHQ’ section does here: http://scores.espn.go.com/mlb/preview?gameId=311027124

Any suggestions? Thanks!

Answer 1

The function which gives you information about where you are in the page is scrollTop(). With it you can detect if you’re past a certain point, and then modify the CSS of an item to make it position: fixed, for example.

Here’s an example:

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 120) {
            $('#topThing').css('position', 'fixed');
        } else {
            $('#topThing').css('position', 'relative');
        }
    });
});

And here’s a JSFiddle showing how it works.