Make any Widget Sticky/Float in Blogger

Here is a simple trick to turn your widgets sticky when a user scrolls down your blog. We’ll use a simple to code to make your widget float as the user scrolls down the page. You can use this simple code to turn any widget in your blog sticky regardless of where it is. You only need to have the Widget ID. It will work perfect for email subscription box, social sharing widget, menu navigation bar or anything that has a widget id.

Want to see a DEMO. Look at our navigation bar floating as you scroll down the page. Catchy, isn’t it?

Let's see How we can make any widget sticky

• Navigate to Blogger Dashboard > Template > Edit HTML
• Now search for </body> and paste the below code just above it.

<script>
// Sticky widget by bloggslab.com
// Tutorial at http://www.bloggslab.com/2014/02/how-to-make-widgets-sticky.html 
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.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 !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 

REPLACE  YOUR_WIDGET_ID with your widgets ID (see: how to find widget id of your widget)

NOTE: Edit the code highlighted in blue to customize the style.

• Now Save the Template.