Have you ever wanted a section to be sticky when scrolling to it and be fixed?

For years we have been using jQuery to target a specific section and then add a class name. Once this class name has been added to add some custom CSS to make it fixed and set the position. This could cause headaches as sometimes the size would change or at the bottom, it would overflow the text or images of other section. It would become a big task to get it looking perfect.

Fear not, with this simple piece of code, you can avoid all this and get it working first time, so easily.

You can add a class to the section, column or row – lets say “sticky-section” or even modify our CSS below to target the section you already have.

This is all the code you need to add – I know, crazy right?

 

Want to see a live example? Well look at our sidebar on this page, this is how we do it.

The code “postion: sticky” will automatically stop the section from being fixed when it hits the end of the area and reaches another section below.

The only other bit of code you need is to make the page-container overflow visible. If it has hidden, it won’t work.

Are you astounded as much as I was when first discovered this?

Want to do some other cool things? Check below an example

Just some dummy text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Backpack Shop Layout pack - Bodycommerce

Fixed Section

Just some dummy text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Backpack Shop Layout pack - Bodycommerce

Fixed Section

Fixed Section

Just some dummy text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Backpack Shop Layout pack - Bodycommerce