How To Make Any Widget Sticky in Blogger

When a visitor scrolls down your blog to view more content, the upper portion of your blog goes out the window from the top to make way for the lower portion that enters from the bottom.
Now what we are going to do is stick your chosen widget to the top edge of the window as it is about to leave, thus making the widget visible at all time while the visitor scrolls. It will float there until its original location comes back when the page is scrolled back up.
This trick is applicable to any widget or element that has an ID, regardless of its location on your blog. It is perfect for a navigation bar, subscription box and social media sharing buttons.
See it in action, scroll down this post and keep your eyes on the top menu bar.

How to install

1. Press Ctrl+F and find </body>

2. Paste the following code above the </body> tag in your template or put it in a HTML/Javascript widget. If you choose to HTML/Javascript widget, make sure you position it below the widget that you want to make sticky.

<script> // Sticky widget by rnhckr.com // Tutorial at http://www.rnhckr.com/2013/04/how-to-make-any-widget-sticky-in-blogger.html // Free to use or share, but please keep this notice intact. //<![CDATA[ bs_makeStickyundefined"YOUR_WIDGET_ID"); // enter your widget ID here function bs_makeStickyundefinedelem) { var bs_sticky = document.getElementByIdundefinedelem); var scrollee = document.createElementundefined"div"); bs_sticky.parentNode.insertBeforeundefinedscrollee, bs_sticky); var width = bs_sticky.offsetWidth; var iniClass = bs_sticky.className + ' bs_sticky'; window.addEventListenerundefined'scroll', bs_sticking, false); function bs_stickingundefined) { var rect = scrollee.getBoundingClientRectundefined); if undefinedrect.top < 0) { bs_sticky.className = iniClass + ' bs_sticking'; bs_sticky.style.width = width + "px"; } else { bs_sticky.className = iniClass; } } } //]]> </script> <style> .bs_sticking {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgbaundefined0,0,0,0.3);} </style>

3. Get the ID of the widget or element you want to make sticky and enter it in line 6 (replacing "YOUR_WIDGET_ID"). For example let's say the widget ID is HTML9, then code line 6 would become:
bs_makeSticky("HTML9");

4. Preview before saving.

Styling

Styling for the sticky widget while it's sticking can be applied in line 28.
Background and box-shadow are optional. However you might want to keep the background (and replace the color to match your sidebar's). Most templates do not assign a background to widgets meaning you can see the content scrolling in the background.

Enjoy!

You Also Like: Add Metro Style Social Sharing Button's For Blogger Blogs