How to Make Any Widget and Navigation Bar Sticky in Blogger

As the title of this post explains the post is about making widget and navigation bar sticky on Blogger blogs. Sticky means the widget will float when users will scroll down your blog post. It means the widget that you will make sticky with the help of my JavaScript will be visible every time. The widget will keep float at the top until it's original place comes or when the page is scrolled back to top. It is very easy to make any widget and navigation bar sticky. To do this you will have to use the Script that I will provide on this post.

If you haven't understand about the sticky and floating widget until now than take a look at the navigation bar of my blog. You can see the navigation bar keeps floating on the top when you scroll from it's original location. It can be very useful in making subscription box, Facebook Like Box, Follow Button, Like buttons etc. It will make your blog easily navigable and your users will be able to locate your blog's content very easily. You will be able to float or make sticky anything which has ID. As you were knowing that all the Widgets in Blogger blog are given a unique Widget ID that can used to customize and design the widget of your Blogger blog. Now see the steps given below to know how to make widget of your Blogger blog sticky or floating. But before that see the image given below to know more about sticky or floating widget.

Now you have understand what sticky means and so you will also want to know how to make your Widget sticky to make it visible even after scrolling through that widget specified place. See the very easy steps given below.

• At first sign in to your Blogger blog and navigate to the title of the blog in which you want to make the widget sticky.
• Now you have to go to Template page from the Dashboard section.
• Click on Edit HTML which is located below the live preview of the Template page of your blogger blog.
• In the HTML page search for the closing body tag. If you don't know what closing body tag means than see the closing body tag below and search for it in your Blogger Template. Now search for the closing body tag given below.

</body>

Tip: The closing body tag (</body>) is generally located at the very last lines of the Template. You can also search for that code by pressing CTRL+F. Now follow the next step given below.

• Now add the JavaScript Code given below just above/before the "</body>" tag.

<script>
$(document).ready(function () { 
  var top = $(&#39;#YOUR-WIDGET-ID-HERE&#39;).offset().top - parseFloat($(&#39;#YOUR-WIDGET-ID-HERE&#39;).css(&#39;marginTop&#39;).replace(/auto/, 0));
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y &gt;= top) {
      $(&#39;#YOUR-WIDGET-ID-HERE&#39;).addClass(&#39;fixed&#39;);
    } else {
      $(&#39;#YOUR-WIDGET-ID-HERE&#39;).removeClass(&#39;fixed&#39;);
    }
  });
});
</script>
<style>
  #YOUR-WIDGET-ID-HERE.fixed {
background:#FFFFFF  !important; position:fixed !important; top:0; z-index:9999; margin-top: 0; position:relative\9 !important;
}
</style>

It's not over yet! You will need to replace YOUR-WIDGET-ID-HERE in the above JavaScript code with the widget ID that you want to make sticky. You will need to replace YOUR-WIDGET-ID-HERE with your Widget ID in line 3, 7, 9, 15 in the above Script. It means you have to add your Widget ID five (two times in line 3) times in the above JavaScript code to make it sticky Widget.  If you don't know how to get the ID of the Widget or Gadget that you want to make sticky than follow the very easy steps that is explained here to get your Blogger Widget ID.

• Now after replacing YOUR-WIDGET-ID-HERE with the Widget ID of your Blogger Widget take a look at your Blogger template by pressing the Preview button.
• Save your Template.

Style your Sticky Widget

1. Yes, you can style or design your Sticky Widget. Normally the Widget are not given the style sheet. So, to make it look just like the Widget of you blog you can use the CSS codes.
2. Styling for the Sticky Widget can be applied in line 16. By default the background color is white (#FFFFFF).
3. Change the styling according to your need and to make it look jut like your sidebar.

Great! You have just made one of your Widget of your Blogger blog sticking. Now to make your navigation bar floating you will just need to get the ID of your Navigation bar and add the ID in the specified place in the above given JavaScript code. It can be used to make any widget or part of your Blogger blog sticky that has a Class or ID. Just go to the link given in previous paragraph to know your widget ID.

That's All! I hope this post helped you in making your Blogger Widget Sticky. If you faced any problem than you can drop a comment below.