'changing an elements css position after scrolling down the page

I am messing around with some jquery trying to get to grips with it.

I have a ul nav which has a absolute position set but after I scroll the page down by 200 pixels i would like that to switch to position fixed so that the nav always stays on the page.

How would I do this?

below is the example I am working on

http://satbulsara.com/tests/

javascript jquery

Solution 1:^[1]

Thanks to everyone for being so quick to help

this is what i wanted

$(document).ready(function() {
    var theLoc = $('ul').position().top;
    $(window).scroll(function() {
        if(theLoc >= $(window).scrollTop()) {
            if($('ul').hasClass('fixed')) {
                $('ul').removeClass('fixed');
            }
        } else { 
            if(!$('ul').hasClass('fixed')) {
                $('ul').addClass('fixed');
            }
        }
    });
});

Thanks!!!!!

Solution 2:^[2]

I wrote this jQuery plugin to do just that.

Solution 3:^[3]

Here is the code I use to create a "sticky" sidebar. You'll need to modify the IDs to suit your markup.

var sidebarScrollTop = 0;

$(document).ready(function() {
    sidebarScrollTop = $("#sidebar").offset();

    $(window).scroll(function () { 
        var docScrollTop = $('body,html').scrollTop();

        if(docScrollTop > sidebarScrollTop.top) {
            $("#sidebar").css({ position: 'fixed', top: '0px' });
        } else {
            $("#sidebar").css({ position: 'static' });
        }
    });
});

$(window).resize(function() {
    sidebarScrollTop = $("#sidebar").offset().top;
});

$(document).resize(function() {
    sidebarScrollTop = $("#sidebar").offset().top;
});

Basically, all you need to do is change the #sidebar for the ID of the sidebar container. This code will see if the sidebar element is scrolled past the top of the screen. If it is, it changes it's position to fixed, and when it returns to being on the page again, the position is returned to static (default).

The $(document).resize() and $(window).resize() functions will make sure the sidebar stays stick at the top of the page when the document/window is resized respectively. The document function will ensure the sidebar works properly even if you have jQuery animations changing the size of elements.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nate Stone
Solution 2	Chris Heald
Solution 3

'changing an elements css position after scrolling down the page

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]