Sticky header with jquery offset

Can you link to an example of what this should look like?

I did find this example, but want to make sure this is what you're looking for:

http://imakewebthings.com/jquery-waypoints/sticky-elements/

It's an example page for a jquery plugin called Waypoints. A pretty clever one, too.

http://happycog.com/ is kinda what I am looking for.

Although my header AND nav would remain at the top. (not just the nav)

Thanks David. I had looked at waypoints but wanted to go with ScrollTo as it seemed to have more support. But I really have no experience in this ... and was afraid I would run into problems later with mobile devices,

Here's a site that is using scrollTo that I think does what you want... and it's pretty smooth too:

http://portfolio.tomvervoort.net/

Found via this StackOverflow issue:

http://stackoverflow.com/questions/11006440/jquery-scrollto-fixed-header-offset

Maybe look at his jquery and markup as a sample?

Thanks, david ... I googled for days, too.

Just hoping there might be a jquery wizard in the forum (lol)

Hey marsha- have you tried including twitter bootstrap in your project?

If not, having a sticky navbar (at a desired location) is as simple adding a few lines to your markup.

Check out the link here http://twitter.github.com/bootstrap/javascript.html#scrollspy

Hey Marsha,

I've had a look at the source of the happycog website to see how they do it.

It looks like they apply the class fix to the navigation element. The CSS is:

//media="screen, projection"
.fix {
   position: fixed;
   top: 0;
   z-index: 1000;
}

Here's the jQuery. I'll add some comments.

if($('body').hasClass('home')){ //Checks if this is the home page
    var $filter = $('#nav'); //Selects navigation element
    var $filterSpacer = $('<div />', {
        "class": "filter-drop-spacer",
        "height": $filter.outerHeight()
    }); //Creates a spacer, this is to push the content of the page down the same size of the floating menu

    if ($filter.size()) // Checks there is a nav element
    {
        $(window).scroll(function () //Binds to the window's scroll event
        {     
            if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top) // Checks the filter doesn't have the class fix and that vertical number of pixels hidden is greater than the navigations position on the page. This will get executed the first time the page scrolls past the point. I.E When you scroll hits the menu.
            {
                $filter.before($filterSpacer); //Adds the spacer before the navigation element
                $filter.addClass("fix");  //Adds the fixed class
            }
            else if ($filter.hasClass('fix')  && $(window).scrollTop() < $filterSpacer.offset().top) //If the navigation element has the fix class and that vertical number of pixels hidden is less than the top of the newly added spacer. I.E When you scroll UP past the spacer.
            {
                $filter.removeClass("fix"); //Remove the fix class
                $filterSpacer.remove(); // And remove the spacer
            }
        });
    }
}

Hope that helps.

Tony Ramirez - not tried Twitter Boot strap... too much to learn right now :/

Andrew Chalkley - thanks for that. I will try and decipher what it all means. I am totally new to js.

thanks all!

Andrew Chalkley Just watching your jQuery tuts. (things are starting to make sense ;-)

Sweet :)

Another resource you need to become comfortable with is the jQuery documentation site should help you with any questions on what certain functions return. For example is you want to know what scrollTop() in the code does just go to the documentation and it tells you more information about it.

Any other questions we're always hear to help.

thanks, Andrew

(so much to learn ;-)