Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

marsha grasett
marsha grasett
9,995 Points

Sticky header with jquery offset

Creating a fixed header of 200px with ScrollTo with an offset.

Anyone have experience in this or can direct me to some sources (other than flesler.com and CSS Tricks)

Also how does this translate on a tablet or mobile. I'm thinking not.

Thanks all.

12 Answers

David Poindexter
PLUS
David Poindexter
Courses Plus Student 1,690 Points

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.

marsha grasett
marsha grasett
9,995 Points

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,

David Poindexter
PLUS
David Poindexter
Courses Plus Student 1,690 Points

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/

marsha grasett
marsha grasett
9,995 Points

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

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher

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.

marsha grasett
marsha grasett
9,995 Points

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!

marsha grasett
marsha grasett
9,995 Points

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

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher

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.

marsha grasett
marsha grasett
9,995 Points

thanks, Andrew

(so much to learn ;-)