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

Posted by Mitchell Sharber
Mitchell Sharber
16,710 Points

Content beneath header is shifting.

Everything is working fine after I add the sticky plugin, except for when I scroll slowly down the page. There is a point just after the header becomes "sticky", that the rest of the content on the page briefly shifts up. If you continue to scroll, the content does shift back down and everything works smoothly from there.

Is there a way to keep the content from initially shifting up?

Ryan Zimmerman
Ryan Zimmerman
3,854 Points

Use the dev tools to inspect what happens to the divs when you start scrolling down the page, I would guess they are responding to the additional space.

Mitchell Sharber
Mitchell Sharber
16,710 Points

Yeah it is being caused by the div switching from position: static to position: fixed. I just tried creating a blank div (with a specified height of the header) that is toggled to display: show when "sticky-start" is active. This has helped but the content is still shifting in an undesired way.

Mitchell Sharber
Mitchell Sharber
16,710 Points

Found a fix:

Added this to the plugin: $('.header').on('sticky-start', function() { $('.sticky-wrapper').css({height: '64px'}); }

For some reason when sticky-start first initialized the height of the div was still set to 0 and was causing the temporary collapse of the content. Scrolling down just a bit further set the height to 64. So forcing the height to be 64 as soon as the sticky-start appeared prevents the content from collapsing.