How To Make Any Widget Sticky

Making any widget sticky adds the chance of your blog's special content to be more popular and eye catching like your subscription box, social networking offerings, menu tabs and search box.

This  tweak is applicable to any gadget/widget  that has an ID, just locate the specific widget in your blog and get its ID.

You can see it live in my sidebar as you scroll down this page.

Making Any Widget Sticky

Go to Blogger Dashboard >> Template >> Edit HTML
Look for the code below

</body>

Paste the following code above the </body> tag in your template.

<script>
// Sticky widget by Bloggingtipsandtrix
//<![CDATA[
btat_makeSticky("YOUR_WIDGET_ID");
function btat_makeSticky(elem) {
    var btat_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    btat_sticky.parentNode.insertBefore(scrollee, btat_sticky);
    var width = btat_sticky.offsetWidth;
    var iniClass = btat_sticky.className + ' btat_sticky';
    window.addEventListener('scroll', btat_sticking, false);
    function btat_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            btat_sticky.className = iniClass + ' btat_sticking';
            btat_sticky.style.width = width + "px";
        } else {
            btat_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.btat_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>

However, if you want not to touch the template, you can simply paste it in a HTML/Javascript (in Blogger) or a Text widget (in WordPress).

Note: If you choose this process, make sure you position this widget below (after) the widget that you want to make sticky.

Get the ID of the widget or element you want to make sticky and replace it in the ("YOUR_WIDGET_ID"). For example let's say the widget ID is HTML12, then code in the line would become:

btat_makeSticky("HTML12");

Preview before saving.

Customization:

Styling for the sticky widget while it's sticking can be applied in  between the line <style>....</style>
like the background, box-shadow, margin, etc.
Enjoy!
Credits from Bloggersentral

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook