Making Elements Sticky With CSS - No Plugin Necessary

Categories:
Published On:
Reading Time:
2 Minutes

We have had a few people ask us how we managed to get our sidebar to "stick" as your scroll down the page. So we decided to write a tutorial about it! If you look at one of our longer blog posts you can see that as you scroll down the page the side bar moves with you. We do this to highlight our important information like signing up for our newsletter and providing a quick way for people to get in contact with us should they happen to like out blog.

We have seen tons of implementations of using a plugin to make items sticky throughout the website. However, this is the best way to do it as it is less than 20 lines of CSS, mobile responsive, and you don't need a plugin!


@media only screen and ( min-width: 1405px ) {
 .sticky-column {
  position: sticky !Important;
  position: -webkit-sticky !Important;
  top: 150px !Important; /* Change the height from the top here */
 }
}
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {
 .sticky-column {
  position: sticky !Important;
  position: -webkit-sticky !Important;
  top: 150px !Important; /* Change the height from the top here */
 }
}
CSS

Let's break down this code, shall we?

  1. We are using CSS media queries to ensure that it is compatible with all different devices.
  2. If you look at top: 150px it is how many pixels that the column is spaced from the top. In our case we are using a fixed header so it looks less than 150px but you will most likely need to adjust it to suit your needs

Then to use it, you simply create a two column layout like you see on this blog posting right in front of you. On the column you want sticky, just add the class .sticky-column and you are good to go! Another cool feature is you do not need to make a column sticky per se, but you can also make any element sticky as well. Just assign it .sticky-column and you are good to go. On second thought, if you are going to assign it to elements, change the selector to something more universal to help keep your code organized & clean.

Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us

We have had a few people ask us how we managed to get our sidebar to "stick" as your scroll down the page. So we decided to write a tutorial about it! If you look at one of our longer blog posts you can see that as you scroll down the page the side bar moves with you. We do this to highlight our important information like signing up for our newsletter and providing a quick way for people to get in contact with us should they happen to like out blog.

We have seen tons of implementations of using a plugin to make items sticky throughout the website. However, this is the best way to do it as it is less than 20 lines of CSS, mobile responsive, and you don't need a plugin!


@media only screen and ( min-width: 1405px ) {
 .sticky-column {
  position: sticky !Important;
  position: -webkit-sticky !Important;
  top: 150px !Important; /* Change the height from the top here */
 }
}
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {
 .sticky-column {
  position: sticky !Important;
  position: -webkit-sticky !Important;
  top: 150px !Important; /* Change the height from the top here */
 }
}
CSS

Let's break down this code, shall we?

  1. We are using CSS media queries to ensure that it is compatible with all different devices.
  2. If you look at top: 150px it is how many pixels that the column is spaced from the top. In our case we are using a fixed header so it looks less than 150px but you will most likely need to adjust it to suit your needs

Then to use it, you simply create a two column layout like you see on this blog posting right in front of you. On the column you want sticky, just add the class .sticky-column and you are good to go! Another cool feature is you do not need to make a column sticky per se, but you can also make any element sticky as well. Just assign it .sticky-column and you are good to go. On second thought, if you are going to assign it to elements, change the selector to something more universal to help keep your code organized & clean.

Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us
Dimitri is is a full-stack developer and the founder of Sigma 1. He spends the majority of his time designing websites for customers. However, when he has a bit of free time, you can catch him on a hike or exploring the nature around Las Vegas.

Leave a Reply

Your email address will not be published. Required fields are marked *

Leave a Reply

Your email address will not be published. Required fields are marked *