Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Brandon Brigham
Brandon Brigham
3,716 Points

How to make a sticky header but as a sidebar?

Hello,

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?

Thanks!

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.