So suppose you want to fix the sidebar on a Twenty Fifteen WordPress site, because most of the time it’s going to be short enough to fit entirely on the screen. Maybe it’s not always going to be, or maybe it’s just a little too long so you want to have it scrollable but not tied to the scrolling of the rest of the page. You can do that. Actually, it’s pretty easy if you aren’t concerned with aesthetics: position:fixed; height:100%; overflow:scroll; on the sidebar should cover you. However, Internet Explorer (even 11) will put a nice wide scrollbar down the edge of your sidebar whether or not scrolling is happening or even possible. Here we’ll talk about making that not happen.

The key is a lightweight jQuery plugin called jQuery-slimScroll. It adds a lovely and styleable scrollbar only as necessary, and allows you to avoid overflow:scroll entirely (which is the source of the IE scrollbar).

In your wp-content/themes/fancyfifteen folder you’ll need 4 files: functions.php, style.css, aqa-pretty-scrolling.js, and header.php (the scrolling requires adding a wrapper to the sidebar content, which in Twenty Fifteen is in the header file).

As will now be standard, you can get the code for all of my Twenty Fifteen modifications in one big (but separable) Twenty Fifteen child theme on GitHub.

header.php:

The only thing in header.php that is different is the div with id “pretty-scroll”, just inside the div with id “sidebar”. Everything else is exactly as in Twenty Fifteen, which is why I haven’t bothered making this very large.

functions.php:

This is also very standard: enqueue your parent and child stylesheets, then enqueue jQuery-slimScroll and our JavaScript program that makes use of it. These enqueuings could be combined.

style.css:

This is simple but getting more interesting. The sidebar isn’t along the side until the screen gets sufficiently large, hence the media query. If a visitor has JavaScript turned off, they will get a fixed sidebar with overflow: scroll, trading an ugly scrollbar for a usable sidebar. Otherwise, the code will tack on the hide-scroll class, erasing the scrollbar. The rest of the styles bring the widgets closer together; if you are not accordion-folding them you may not want them closer, but then again if you’re not accordioning them what are the odds you have few enough to want to fix your sidebar?

aqa-pretty-scrolling.js:

Finally, we have the little bit of code that sets everything up and activates jQuery-slimScroll. If the sidebar is fixed (this seemed an easier indicator to use than sizes), the sidebar and pretty-scroll div get overflow:hidden on them, and then slimScroll scrolls pretty-scroll within sidebar. If you have trouble with bits of your sidebar not scrolling with the rest, uncomment the line that sets position: relative on pretty-scroll. For a quick and easy style match, set the scrollbar color to one of your site’s main colors. It will be translucent, so a darker one will likely look better.

There you have it. It took a little while for me to get this set up so there was no scrollbar visible on IE, but now that I have a template I’ll be using this whenever I have a piece of a page that scrolls independently of the rest of the page.

Complicated scroll from Pixabay