Okay, let’s be real, you know how awkward your site gets when a post is way longer than the sidebar content.
It's like the sidebar just vanishes and your post is left hanging there all alone, making your site look broken. At least that's how I see it.
For the longest time, I didn’t really care much about it. But then, someone else asked me how to fix this, and of course, I had to find a fix which is to make the sidebar sticky and smooth.
After a little bit of JavaScript magic, it worked perfectly on their site. So naturally, I had to share this!
How to Make a Sticky Widget in a Blog Sidebar
1. Log into Blogger, open the Template editor, and slap this code in just before the </body>
tag
<script>
//<![CDATA[
$(function() {
if ($('#sticky-sidebar').length) { // Replace "#sticky-sidebar" with the specific side bar ID used in your template
var el = $('#sticky-sidebar');
var stickyTop = $('#sticky-sidebar').offset().top;
var stickyHeight = $('#sticky-sidebar').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20 // Distance or margin from the top
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Pay Attention to These Key Parts:
#sticky-sidebar: Replace this with the ID of the widget or content you want to make sticky.
#footer-wrapper: This is the ID where the sticky function stops.
This means it has to be the section of your site html after the sidebar or sort.
Next up, we need to ensure the width of the sidebar is like this. In most cases it is already like this. so confirm or add the below css.
Place the following css before </b:skin>
or search if it already exist on your temolate then ignore.
You are free to adjust the width. I use 300px.
#sticky-sidebar{width:100%;max-width:300px}
Make sure to set the width based on your template's sidebar width. And don't forget to tweak it for different screen sizes with media queries.
With the code below the sidebar won't exist on smaller screens like mobiles, it will be shited below the post content. this makes the sidebar responsive.
@media only screen and (max-width:800px){
#sticky-sidebar{width:100%;max-width:100%}
}
What if the JavaScript Doesn’t Work?
Yeah, so I tried this on my own site, but for some reason, the JS didn’t do its thing. It’s probably because of my sidebar tabs, maybe something was conflicting.
mxm I didn’t really dig deeper because I found an easier (and maybe less reliable) way. You can make your sidebar sticky with just CSS!
Here’s the one-liner: add befor </b:skin>
#sticky-sidebar{
position: -webkit-sticky;
position: sticky;
top: 0;
}
Yeah, it's that simple. Now, this position: sticky thing is said to be still experimental in CSS3, so it might not play nice with dinosaur browsers.
Your sidebar would be normal and won't stick on older browsers if you ise the css alone.
The End
So there you have it. Two ways to make your sidebar stick around. Try them out and see which one works best for you.
Happy site customization!