How To Make Scrolling Sidebar With Simple Steps

Did you see some websites with having a floating sidebar while scrolling? It looks good. Scrolling Sidebar making is really easy. And in this post,  I will show you how to make scrolling sidebar with simple steps. In this post, we will make a Scrolling Sidebar with Jquery. If you want to make it then follow our below steps. You may like to read Why You Start Your Blog On Blogger Blogspot.

Make A Scrolling Sidebar With Simple Steps

If you want to make your Blogger blog sidebar float while scrolling. Then first go to the Blogger.com.

1. Login to the Blogger.com
2. Select your blog from your blog list
3. From your blog dashboard click on the template link
4. Now from the next page click on the Edit HTML button
5. It will show you your blog template code
6. Click anywhere on the code and search </head> by pressing CTRL+F
7. After finding the tag paste the following script just before </head> 
8. Finally, press the save changes button

<script>
$(function() {
    var $sidebar   = $(".PopularPosts"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
 
});</script>

Customization

 With the above script, only popular posts will be float while scrolling. But you can float specific item by just replacing PopularPost to your desired div class. For example, you want to float the whole sidebar then replace it with the sidebar class which is usually sidebar.

That's it. Thanks for reading my this post. Keep visiting for more useful posts. If you have any question about this post feel free to ask me by dropping your comment below.