There are many WordPress plugins available to make sidebar widgets sticky. Sticky sidebars and widgets remain visible when a reader scroll down the page to read the lengthy blog post.

I prefer to use less plugin and try to find the simple and better way to fix the WordPress issues.

Here is the very simple CSS code, which makes your WordPress sidebar sticky.

/*The following code has made sidebar sticky and floating*/

/*https://tickera.com/blog/creating-sidebar-scrolls */

@media only screen and (min-width: 1024px) {
.widget-area {
position: -webkit-sticky;
position: sticky;
top: 0;
padding-top: 10px;
}
}

This CSS code makes sidebar sticky on screen only. I have tested this code on the Sequential theme but you might need to modify the CSS classes with your theme’s sidebar class.

For example, the above code does not make sidebar sticky on our current theme we are using on CreateWPTheme.com but if we replace .widget-area with grid-30 this CSS code works and makes our sidebar sticky.

/*The following code has made sidebar sticky and floating*/

/*https://tickera.com/blog/creating-sidebar-scrolls */

@media only screen and (min-width: 1024px) {
.grid-30 {
position: -webkit-sticky;
position: sticky;
top: 0;
padding-top: 10px;
}
}

Simply add the above code in your child theme’s style.css file, save changes and you are done. If you are not using a child theme, You can go to Appearance – Edit CSS module and add this code.

Using Chrome Developer Tools to Test CSS

Right click anywhere on the screen and Open Chrome Developer Tools. From the styles Tab, click on your style.css file to open in Sources panel. Now scroll down and at he end of style.css file add above code. If this code makes your sidebar sticky, You can use this code if it does not work, use your sidebar’s CSS class.