Making A Blogger Widget Sticky

Some of you may observed that in some websites like Facebook(even in mine) there will be navigation bar that come along you when you scroll down. Sometimes its necessary to have the navigation bar sticky to attract visitors towards your blog category, older posts, social connect etc.

It is the J Query code that is making this possible. Even you can make this in your blog. To do this you should have Widget ID of the widget that you are going to make sticky. 

To make installation more simple I have made a video by which you can know how to find Widget ID and also to install J Query code. Allow annotations in the video for explanations.



This Video Was made using Snagit 11. For more details click me.. 

You can also follow these steps To install
Goto Blogger Dashboard > Layout > Add A Widget > Select Html/JavaScript, Paste the below code there.

<script>//<![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; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);} </style>
After Pasting, Replace YOUR_WIDGET_ID with the desired widget id. To find the widget id watch the video above.Widget ID will be in the form HTML2 hence the code will be like bs_makeSticky("HTML2");Modifications:♦ You can change the background of sticky bar by modifying CSS code inside <style>---</style> tags. Try this if are very sure of CSS codings. ♦ You can add shadow to the bar, you can change the bar opacity etc by modifying the same.Code Credits: BloggerSentral