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 trialtate
13,435 PointsJumping 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
11,368 PointsHi Tate! Could you please add your code in order to check what's going on?
Cheers :D!
Julian Aramburu
11,368 PointsHey! It's working fine for me!
tate
13,435 PointsThat's really weird...
Randy Layne
Treehouse ModeratorWhat'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
tate
13,435 Pointstate
13,435 PointsIt'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)