How to Add a Scrolling Sticky Sidebar to Your WordPress Site

A sticky sidebar is a great way to improve the user experience of just about any website. When a website has a sidebar that is not sticky, then when you scroll down below the bottom of the sidebar, then you just have this awkward white space on that edge of the site. What’s the point of that white space, when the sidebar could stay there?

Where Other Sticky Sidebars Fall Short

To simply make a sidebar sticky, it’s actually quite easy. It can be done with this simple CSS…

.sticky {
   position: fixed;
   top: 50px; // or where you want the top to be
}

You might ask, “But what if my sidebar could be too big to fit in the vertical view port of my users’ browsers?”

Well, there is a very elegant solution to this, and it’s called the Theia Sticky Sidebar.

The Magic of Theia Sticky Sidebar

Before I finally discovered the Theia Sticky Sidebar, I was searching and searching for the solution to this sticky sidebar problem, but I kept finding posts where people shared how to do a standard sticky sidebar that simply has its position fixed, but they didn’t address the problem of having a tall sticky sidebar that wouldn’t fit on the user’s screen.

I knew that a solution existed out there because the WordPress admin area does this perfectly! Have you noticed?

When you edit a post in WordPress, the right sidebar is sticky. But, since it is often a very long sidebar, it scrolls with the page until the bottom of the sidebar meets the bottom of the screen’s view port, at which point it becomes fixed at that position.

Then, when you scroll up, the sidebar goes from position fixed to position absolute at its current top position which allows it to begin scrolling with the page again. That is, until the top of the sidebar meets the top of its container, at which point it’s fixed again.

You may have also seen the same style of scrolling sticky sidebar implemented on the WordPress Twenty Fifteen theme (although I think that one has a custom-coded version of the same thing).

I loved this sticky sidebar so much, I used it on this very website. If you look at one my longer posts, or reduce your browser’s height, you’ll see how the sidebar scrolls up and down with the page.

How to Install the Theia Sticky Sidebar to Your WordPress site

Enough about the “why”… Let’s get into the “how”.

To install a Theia Sticky Sidebar on your WordPress site, you have a couple options:

Buy this WordPress plugin which does it all for you.
Or, if you are comfortable with coding it yourself, here’s how…

First you need to enqueue the Theia Sticky Sidebar javascript file or include it in your compiled javascript.

Downloading Theia via Package Manager

If you are building your own theme and/or have bower or NPM, you can install Theia with these commands

If you are using Bower as your package manager:

bower install theia-sticky-sidebar

If you are using NPM as your package manager:

npm install theia-sticky-sidebar

Then, you could include the path to the javascript files in your gulpfile.js so that it is included in your minified theme javascript. This example shows including these two javascript files from the node_modules folder when using NPM.

const SOURCE = {
   scripts: [
      // Other javascript files would be included here
      'node_modules/theia-sticky-sidebar/dist/ResizeSensor.min.js',
      'node_modules/theia-sticky-sidebar/dist/theia-sticky-sidebar.min.js',
    ],
   
   // Styles and images would probably be here
};

The next time you would run your npm build command, it would include the code from these new javascript files in your output dist javascript.

Downloading Theia via Github

If you don’t want to use Bower or NPM, you can also download the latest minified javascript files from here. You’ll need both ResizeSensor.min.js and theia-sticky-sidebar.min.js.

Once you have those files downloaded and stored in your theme, you will need to enqueue these javascript files using the following code in your functions.php file…

function enqueue_theia_javascript() {
    wp_enqueue_script( 'theia-sticky-sidebar', get_template_directory_uri() . '/path/to/theia-sticky-sidebar.min.js', array( 'jquery' ), '1.7.0'), true );
}
add_action('wp_enqueue_scripts', 'enqueue_theia_javascript', 999);

If you included your javascript using a gulpfile (like the previous section), then you don’t need to enqueue your javascript like this. Your main dist javascript should already be enqueued.

Installing Theia on Your Theme’s Sidebar

Now that we’ve got the Theia Sticky Sidebar javascript files loaded up, we just need to add this simple jQuery code shown below.

$(document).ready(function() {
   $('.sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 100
   });
});

I’ve demonstrated that the code should be wrapped inside of your standard $(document).ready(function() { ...... }); which makes the code run once the page (or the DOM) has finished loading.

In my example, my theme has a sidebar container with class="sidebar" which is why I used '.sidebar' as my jQuery selector.