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.
See it in action, scroll down this post and keep your eyes on the top menu bar.
How to install
- 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>
- 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");
- 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"
thanks for this tutorial, finally i found it! hahahay
but, is this widget support all browser?
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
@Topijerami Topjer
Should work on Firefox and Chrome. IE? maybe not.
@Widget For Blogger
Sticky Adsense ad is a no no my friend.
ok thanks otherwise i would have done it.
I really appreciate this installation guide, it's pretty clear easy.
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 .
@Best of shayari
I've added an example for clarification. Check it out.
I love this tutorial. Thanks for sharing.
thanks for sharing this useful tutorial, friend :)
Thanks for sharing Greenlava.
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/
@Lizz
You're welcome.
Thanks mate! really important stuff, was wondering how to do this for quite sometime, guess I landed on the right blog
Awesome, this is how the facebook top bar is. Blogger is really improving and I am loving it.
Where "/body" in new blogger html editor?
@ulumquran
Scroll to the bottom of the HTML window, you'll see it.
thanks and great, for me called it floating menu bar, huhu anyway nice tutorial
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.
What a great idea - thanks for the lesson
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.
Thanks for sharing this useful tutorial.
finally.... i found this tutorial.
thanks
Thanks for sharing knowlegde like this
Thanks for this Great Tutorial
How to do I use this code to make two gadgets sticky ? ( both present in the right side bar )
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
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.
@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.
@Ranjith
To make add a second sticky, just insert a function call after line 6, like so:
bs_makeSticky("YOUR_2ND_WIDGET_ID");
THANK YOU SO MUCH!
hi, thanks for this very nice and interesting post. :) I like your writing style, it's quite unique.
Thank U, It's working........
Thanks. found it after a long search. It is working.
Thanks...It works. It's simple and easy. I searched for this for 2 days. But I found it here.
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.
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?
@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");
Thanks for sharing and I'm really appreciate it.
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
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.
REALLLYY GREAT THANKS!!!
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.
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/
Thanks for your great plugin, but how to change the top margin? I tried change some numbers, but its messed up
So Easy Thank You :)
Please help.. i want my widgets to stay in place while scrolling the page.. like we see in this website on left..
Thanks!
@crisanto valencia
Please refer to this tutorial: Adding a floating “back to top” button
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!!
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
Happy blogger here! Thanks that I found this simple and straight to the point tutorial. It works on my blog! :)
works perfectly on my blog with custom template. Thank You
Hooray! It works! Thanks!
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.