How To Make Any Widget Sticky in Blogger

When a visitor scrolls down your blog to look at additional content, the higher portion of your blog goes out the window from the highest to create method for the lower portion that enters from very cheap.

Now what we tend to ar progressing to do is stick your chosen gadget to the highest fringe of the window because it is on the point of leave, so creating the gadget visible the least bit time whereas the visitor scrolls. it'll float there till its original location comes back once the page is scrolled keep a copy.

This trick is applicable to associate degreey gadget or component that has an ID, no matter its location on your blog. it's good 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 highest 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!