How to Make Blogger Sidebar and Widget Sticky or Fixed - Scrolls with the visitor!

At first let's see how to make blogger sidebar sticky or fixed using jQuery:

First Option :

(1) Go to Blogger Dashboard >> Template >> Edit HTML

(2) Search for </body> using Ctrl + F. Now paste the following codes just above </body>



<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(function() { var offset = $(".column-right-inner").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $(".column-right-inner").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $(".column-right-inner").stop().animate({ marginTop: 0 }); }; }); }); </script>




(3) Now save Template and You are done :)

[Note about Customization: .column-right-inner is the right sidebar class. If you want to make sticky a left sidebar then replace all those class with .column-left-inner from the jQuery code and topPadding = 15; change the value if you need to increase/decrease space on top of the sidebar.]

Second Option :

    If you want to move a specific widget, then in the similar above process pase the following codes just above </body>

<script src='http://resources.infolinks.com/js/infolinks_main.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/> <script type='text/javascript'> $(function() { var offset = $(&quot;#HTML7&quot;).offset(); var topPadding = 35; $(window).scroll(function() { if ($(window).scrollTop() &gt; offset.top) { $(&quot;#HTML7&quot;).stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $(&quot;#HTML7&quot;).stop().animate({ marginTop: 0 }); }; }); }); </script>

Important: Then Replace #HTML7 With Your Widget ID[Note about Customization:

Now Save Template & you are done.
Previous
Next Post »

7 comments

Write comments
Anonymous
AUTHOR
September 13, 2014 at 12:50 AM delete

Thanks
... it's working

Reply
avatar
Dvya
AUTHOR
July 13, 2015 at 12:39 PM delete

this works..Thank you...ONly problem is goes on scrolling...

Reply
avatar
Unknown
AUTHOR
July 19, 2015 at 11:02 AM delete

Thanks for this code!

I'm using option 2 to catch the last widget in my sidebar. Is there a way to modify the code so the sticky effect stops once the user scrolls to the footer? Id like to allow the user to scroll past the sidebar and into my footer (I'd like to expand it and add more content to the footer than I have right now). Looking to end sticky effect at footer, then catch it again once the user scolls up, above the footer, and then have the widget stick again once it reaches its original position.

Does that make sense?
View my blog here.

I tried reversing the catcher/sticky div and using it a second time at the top of the footer, to no avail. Im thinking the scripting needs a change to include mention of footer also.

Thanks!!
Emily

Reply
avatar
Unknown
AUTHOR
July 19, 2015 at 11:03 AM delete

Sorry if this is a duplicate comment, first one didnt seem to send...

Thanks for this code!

I'm using option 2 to catch the last widget in my sidebar. Is there a way to modify the code so the sticky effect stops once the user scrolls to the footer? Id like to allow the user to scroll past the sidebar and into my footer (I'd like to expand it and add more content to the footer than I have right now). Looking to end sticky effect at footer, then catch it again once the user scolls up, above the footer, and then have the widget stick again once it reaches its original position.

Does that make sense?
Find my blog at faitboum.com.

I tried reversing the catcher/sticky div and using it a second time at the top of the footer, to no avail. Im thinking the scripting needs a change to include mention of footer also.

Thanks!!
Emily

Reply
avatar
QMaths
AUTHOR
August 15, 2015 at 3:04 AM delete

can we do this without animation??? i mean a little animation is there which might be annoying to visiters.

Reply
avatar
Anonymous
AUTHOR
September 20, 2015 at 5:08 AM delete

ads dont past it, dont dont sony

Reply
avatar
Anonymous
AUTHOR
September 26, 2015 at 8:27 AM delete

THESE ARE ADS YOU EARN SUCKS MONEY

Reply
avatar