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 Using jQuery Plugins Add a Sticky Navigation Bar Understanding Plugin Events

Posted by tate
tate
13,435 Points

Jumping over the header with sticky.js?

When the sticky header activates, it jumps like 50px, how do I fix this? It's getting kind of annoying.

3 Answers

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hi Tate! Could you please add your code in order to check what's going on?

Cheers :D!

tate
tate
13,435 Points

It's not the code, it's the sticky.js plugin itself. website: http://port-80-6mlypwor1v.treehouse-app.com/ (it's on the work page)

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hey! It's working fine for me!

tate
tate
13,435 Points

That's really weird...

Randy Layne
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Randy Layne
Treehouse Moderator
Randy Layne
.a{fill-rule:evenodd;}techdegree seal-36
Randy Layne
Treehouse Moderator

What's happening is that once the header becomes sticky, the height of the header is no longer factored in over the main content, and so the main content jumps up that distance. One way to fix this is by adding a class name to the div just below the header (in my example here a call it content) and then in your stick-start and sticky-end events adjust the top margin like this: 

$(".header").sticky()
                .on('sticky-start', function() {
                    $('.description').html("We build <strong>really great</strong> apps");
                    // adjust top margin of main content when header becomes sticky
                    $('.content').css('margin-top', '35px');
                })
                .on('sticky-end', function () {
                    $('.description').html("We build apps");    
                    // take the margin back out when header un-sticks
                    $('.content').css('margin-top', '0');
                });     // end .header selector