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.
make sidebar widget sticky

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:
tilt  hover effect
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


Express yourself!
2 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. Hello, I am really glad to have found your guide but I'd like to ask if it's possible to fix the problem, when the long sticky widget overlaps with the footer. Can I fix this?

    ReplyDelete
    Replies
    1. Thanks for dropping your comment AB, it is possible to fix your problem. May I know your blog url please?

      Delete

Related Posts Plugin for WordPress, Blogger...