How To Make Any Widget Sticky

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 navigation bar, subscription box and social media sharing buttons.

sticky fix positioned floating widget

See it in action, scroll down this post and keep your eyes on the top menu bar.


How to install

  1. Paste the following code above the </body> tag in your template.
    Or if you prefer not to touch the template, you can simply paste it in a HTML/Javascript (in Blogger) or a Text widget (in WordPress). If you choose this route, make sure you position this widget below (after) the widget that you want to make sticky.
    <script>
    // Sticky widget by Bloggersentral.com
    // Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-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> 
  2. 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");

  3. 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!

54 comments to "How To Make Any Widget Sticky"

Admin April 9, 2013 at 3:09 PM    

thanks for this tutorial, finally i found it! hahahay
but, is this widget support all browser?

Widget For Blogger April 9, 2013 at 3:35 PM    

Great one greenlava.Can we make ads sticky.i mean if i make google ads sticky then does this violate google TOC.Create Mobile Apps of Blogger Blog

Greenlava April 9, 2013 at 4:08 PM    

@Topijerami Topjer
Should work on Firefox and Chrome. IE? maybe not.

@Widget For Blogger
Sticky Adsense ad is a no no my friend.

Widget For Blogger April 9, 2013 at 4:28 PM    

ok thanks otherwise i would have done it.

Book Flights to Canberra April 9, 2013 at 4:41 PM    

I really appreciate this installation guide, it's pretty clear easy.

Best of shayari April 9, 2013 at 6:32 PM    

please clear few things do we have to add # tag before the widget id and do we have to delete // sign when copying the widget id.i am confused .

Greenlava April 9, 2013 at 8:10 PM    

@Best of shayari
I've added an example for clarification. Check it out.

Discount Coupon April 10, 2013 at 1:03 AM    

I love this tutorial. Thanks for sharing.

Lizz April 10, 2013 at 1:10 AM    

thanks for sharing this useful tutorial, friend :)

Joe April 10, 2013 at 3:18 AM    

Thanks for sharing Greenlava.

Unknown April 10, 2013 at 11:56 AM    

Nice info and Easy to learn Tutorial

I have a lot of things above </body> but i will try it
Thanks Greenlava
http://www.software-masterz.com/

Greenlava April 10, 2013 at 4:33 PM    

@Lizz
You're welcome.

Easy hairstyles for women April 10, 2013 at 9:02 PM    

Thanks mate! really important stuff, was wondering how to do this for quite sometime, guess I landed on the right blog

Emmanuel Obarhua April 12, 2013 at 7:55 AM    

Awesome, this is how the facebook top bar is. Blogger is really improving and I am loving it.

ulumquran April 13, 2013 at 7:00 PM    

Where "/body" in new blogger html editor?

Greenlava April 14, 2013 at 1:07 AM    

@ulumquran
Scroll to the bottom of the HTML window, you'll see it.

Unknown April 15, 2013 at 12:00 PM    

thanks and great, for me called it floating menu bar, huhu anyway nice tutorial

Taiwan Rentals April 16, 2013 at 1:02 AM    

Thank you so much for the high property tutorial. I want to learn more Widget making. I hope you'll write more articles for Widget Tutorials.

Anonymous,  April 17, 2013 at 11:03 PM    

What a great idea - thanks for the lesson

ArcAngel Mike April 18, 2013 at 9:37 AM    

Wow very useful, this what I am looking for, I want the bar stick even scrolling my blog http://facebooktopic.blogspot.com.

Great post with great instructions for widget making . Thanks fro sharing.

John,  April 24, 2013 at 4:12 PM    

Thanks for sharing this useful tutorial.

rexcel May 3, 2013 at 9:34 AM    

finally.... i found this tutorial.
thanks

safiyhati May 9, 2013 at 5:02 PM    

Thanks for sharing knowlegde like this

Sanjay May 17, 2013 at 11:26 AM    

Thanks for this Great Tutorial

Ranjith May 21, 2013 at 1:58 PM    

How to do I use this code to make two gadgets sticky ? ( both present in the right side bar )

HOG May 23, 2013 at 7:22 PM    

I did exactly what you said but my widget doesn't stick to the top, there is a little space between the top of the page and the fixed widget, can you please help me! :)

check it out : http://www.heelsongasoline.com

Abdul Ahwal May 24, 2013 at 1:49 AM    

Very nice widget. Thank you for helping new bloggers. I have also shared how to add latest designed social and email subscription box to blogger and website.

Greenlava May 24, 2013 at 3:01 AM    

@HOG
I guess you've figured it out (that it was caused by the top margin). Anyways I'll edit our code to reset the top margin to 0.

Greenlava May 27, 2013 at 7:47 PM    

@Ranjith
To make add a second sticky, just insert a function call after line 6, like so:
bs_makeSticky("YOUR_2ND_WIDGET_ID");

summerayn June 2, 2013 at 1:11 PM    

THANK YOU SO MUCH!

Ayesha June 9, 2013 at 7:20 PM    

hi, thanks for this very nice and interesting post. :) I like your writing style, it's quite unique.

আরাফ June 16, 2013 at 3:25 AM    

Thank U, It's working........

Smriti June 27, 2013 at 1:08 AM    

Thanks. found it after a long search. It is working.

John June 27, 2013 at 6:12 PM    

Thanks...It works. It's simple and easy. I searched for this for 2 days. But I found it here.

Bitcoin Roll July 8, 2013 at 4:30 AM    

Okay nice work but my menu has drop-down tabs that don't show when the menu is pinned at the top of the site.
They (drop-downs) work fine while not at the pinned (top) position of the site.
I added your code in the template html editor as you directed.
Can you assist please.

Jake Ooi August 24, 2013 at 1:54 AM    

Hi, what if I want to make 2 widget to be sticky, should I add 2 times the whole code or just add some code into it?

Greenlava August 24, 2013 at 6:57 PM    

@Jake Ooi
No need to add the whole code.
You just need to insert a second function call after line 6, like so:
bs_makeSticky("YOUR_2ND_WIDGET_ID");

Jake Ooi August 24, 2013 at 10:11 PM    

Thanks for sharing and I'm really appreciate it.

WW September 1, 2013 at 8:01 AM    

Thanks, this works great. In my template the menu bar occupies the whole width of the screen while the menu part is a lot like yours on this page. When I scroll the menu width itself is correct but I wondered if I could extent the bar somehow to replicate the template effect. The template is Awesome style.

Thanks,
Doug

Anonymous,  September 7, 2013 at 10:56 PM    

Can you post something about making a box for the default comment message or styling the text like how you have done for the enjoyed the post widget on your site.
Also appreciate if you post something on how you have styled the feed-burner subscription box; both the large one at the top and the smaller one in the bottom.

Unknown September 18, 2013 at 12:14 AM    

REALLLYY GREAT THANKS!!!

Muhammed September 18, 2013 at 10:43 AM    

I have a problem with sticky bar, Google ad code overlaps in sticky bar(tweaksformypc.com)...please check my blog and share your suggestion. Thank you.

Anonymous,  September 23, 2013 at 8:56 AM    

Thank you so much for this tutorial. Indeed, I have a question/problem.
How do I make it stop before footer?
My widget is going through my footer and I really aprecciate if someone can help me, and for sure other people have the same question.
Very thanks again, man.
http://augeracao.blogspot.pt/

Anonymous,  September 26, 2013 at 4:36 AM    

Thanks for your great plugin, but how to change the top margin? I tried change some numbers, but its messed up

Unknown September 29, 2013 at 4:23 AM    

So Easy Thank You :)

Unknown October 4, 2013 at 2:41 PM    

Please help.. i want my widgets to stay in place while scrolling the page.. like we see in this website on left..

Thanks!

Greenlava October 4, 2013 at 5:39 PM    

@crisanto valencia
Please refer to this tutorial: Adding a floating “back to top” button

Unknown October 4, 2013 at 7:13 PM    

Thank you Greenlava for the links..

Unfortunately.I cant hire a first class web designer like you ^_^..I just have a minimal budget.

Thanks!! God Bless!!

Anonymous,  October 5, 2013 at 10:23 PM    

I added the gadget to two items.
The page header is working fine but the one below the page header is jumping to the top.

How can I make it remain in its place.

Thanks You

Queenly Tan December 10, 2013 at 11:37 AM    

Happy blogger here! Thanks that I found this simple and straight to the point tutorial. It works on my blog! :)

Unknown December 24, 2013 at 12:16 PM    

works perfectly on my blog with custom template. Thank You

Jackie Patti January 21, 2014 at 12:26 AM    

Hooray! It works! Thanks!

Anonymous,  September 25, 2014 at 11:53 PM    

This one is super awesome tutorial. It is the easiest and convenient trick to make any widget sticky. 1000000 thanks from my side.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.