Fixed Navigation Bar with two different states

Question

What I want to do is have a fixed navigation bar that is 10px from the top of the window unless it is within the first 200px of the document, then I want it to be 200px from the top ...

So basically I want a navigation bar that is 200px from the top to start off with, but when the user scrolls down 190px the navigation bar scrolls, staying always 10px from the top of the window.

Answer 1

You first listen to the scroll event of the window, and then use the scroll value to know what state to apply to you element. Example with jQuery :

var fixed = false, limit = 50;
$(window).scroll(function()
{
    if (window.scrollTop < 50 && fixed)
    {
        $("#header").css({ position: "relative" });
        fixed = false;
    }
    else if (window.scrollTop > 50 && !fixed)
    {
        $("#header").css({ position: "fixed" });
        fixed = true;
    }
});

Also related to this post for code example