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 = $("#HTML7").offset();
var topPadding = 35;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#HTML7").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#HTML7").stop().animate({
marginTop: 0
});
};
});
});
</script>
Important: Then Replace #HTML7 With Your Widget ID[Note about Customization:
Now Save Template & you are done.
Sign up here with your email
7 comments
Write commentsThanks
Reply... it's working
this works..Thank you...ONly problem is goes on scrolling...
ReplyThanks for this code!
ReplyI'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
Sorry if this is a duplicate comment, first one didnt seem to send...
ReplyThanks 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
can we do this without animation??? i mean a little animation is there which might be annoying to visiters.
Replyads dont past it, dont dont sony
ReplyTHESE ARE ADS YOU EARN SUCKS MONEY
ReplyConversionConversion EmoticonEmoticon