Making Elements Sticky With CSS - No Plugin Necessary

written by: Luke
Last Updated: November 8, 2021

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.

Leave a Reply

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

our blog.

Related Blogs You May Enjoy

Nifty CSS Hover Animations

For this blog post, we will show you how to add even more CSS hover animations for links and/or menu items. If you want to see the…
Read More

Adding Elements Inside Oxygen Repeater or Easy Posts

We are working on a new website for a client (will release URL soon) where they wanted a page for customer testimonials. One of the requirements of…
Read More

Free Adobe Lightroom Filter

When working on any type of project for both yourself and your clients, getting good images is always a difficult task. Sometimes they provide you with a…
Read More