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.
Go to Blogger Dashboard >> Template >> Edit HTML
Look for the code below
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:
like the background, box-shadow, margin, etc.
Enjoy!
Credits from Bloggersentral
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