It explains How to create a sidebar or section that follows you as you scroll down the page. It is very useful to show special or important content to user.
HTML:
<div id="wrapper"> <div id="header"> ... </div> <div id="contentHolder"> <div class="leftsidebar">...</div> <div class="content">...</div> </div> <div id="footer">...</div> </div>
The main objective is to create fixed leftsidebar during scrolling between header and footer.
CSS:
#wrapper { margin: 0 auto; width: 1000px; } #contentHolder{ position:relative; } #header,#footer { background: none repeat scroll 0 0 #CCFFFF; color: #000000; height: 80px; width: 1000px; clear:both; font-size:3em; text-align:center; padding-top:20px; } .leftsidebar { background: none repeat scroll 0 0 #FFFFFF; border-color: #CCCCCC #BBBBBB #888888; border-style: solid; border-width: 1px 2px 2px 1px; margin-bottom: 3px; position: absolute; top: 0; width: 160px; } .leftsidebarfixed { position: fixed; top: 0; } .content { float: left; margin-left: 165px; position: relative; width: 570px; }
jQuery:
$(function () { var msie6 = $.browser == 'msie' && $.browser.version < 7; if (!msie6 && $('.leftsidebar').offset()!=null) { var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0)); var height = $('.leftsidebar').height(); var winHeight = $(window).height(); var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0)); var gap = 7; $(window).scroll(function (event) { // what the y position of the scroll is var y = $(this).scrollTop(); // whether that's below the form if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) { // if so, ad the fixed class $('.leftsidebar').addClass('leftsidebarfixed').css('top',winHeight-height-gap +'px'); } else if (y+winHeight>footerTop) { // if so, ad the fixed class $('.leftsidebar').addClass('leftsidebarfixed').css('top',footerTop-height-y-gap+'px'); } else { // otherwise remove it $('.leftsidebar').removeClass('leftsidebarfixed').css('top','0px'); } }); } });
Enjoy fixed floating element or sidebar!!!
awesome, this is what exactly i wanted…
great tutor
if height of content shorter leftsidebar, i scroll page not smooth
i used it with jquery.wookmark.js but it isn’t working, help me
How I make this work without header sidebar positioned at the bottom of the screen until the footer comes in?
It’s helpful. Thank you.
hay nice post well this is my website http://techn0city.com i wana do the same thing on the right side with html code so pls help me out bro
thanks
Hello,
It’s a very nice tutorial, I want to have exactly the same thing working on my site just with fixed header. Is that possible? Somehow I just can’t figure out what I’m doing wrong.
Thanks in advance!
Nice tut here.. :)
btw, Brother Brij.. could you tell me how to create scrolling down blogroll at blog’s footer section as seen in here http://lummoxie.blogspot.com/ ??
Thanks in advance, Bro :)