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


Brandon Brigham
Brandon Brigham
3,716 Points

How to make a sticky header but as a sidebar?


So I need to recreate this site: http://www.simplifymedical.com/

You will notice when scrolling down that the SIMPLIFY DISC left sidebar menu follows you downwards and upwards as you scroll (somewhat like a sticky header does).

Does anyone know how to implement this in easy to understand terms?


Hi Brandon,

Generally you achieve this the same way as sticky header but for sidebar container you must use some JS/jQuery code to handle with scroll event for change position parameter in css when you approach proper height.

For example:

// default styles for sidebar .sidebar { position: relative; top: 0; }

// jQuery code to run fixed position for sidebar $(document).ready(function() { $(window).scroll(function() {

 if ( $(window).scrollTop() > 20 ) {
   $('.sidebar').css('position', 'fixed');
 else {
   $('.sidebar').css('position', 'relative');

}); });

There is also a new way to make sticky sidebar is use position: sticky on your sidebar but it is not fully supported by browsers yet. This new feature does container positioned relative or fixed depending on how it appears in the viewport .

PS. I've also founded this https://github.com/wilddeer/stickyfill. It might help you.

Konrad Pilch
Konrad Pilch
2,435 Points

This is more of a JS question, not WP :)

1 Answer

The answer is in comment sorry. Take a look please.