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>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).
// 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>
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
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?
ReplyDeleteThanks for dropping your comment AB, it is possible to fix your problem. May I know your blog url please?
Delete