Fixed sidebar with scrolling bar (compatible with IE6)

  • 2020-03-30 02:32:15
  • OfStack

Some shopping sites use this function to place shopping cart or product category navigation, so that the product page is very long, the sidebar can always play its role, some sites use this function to sidebar advertising.

JQuery code:


var rollSet = $('#Roll');//Check the object, #sidebar- TAB is the ID to be fixed with the scroll bar and can be changed as needed
var offset = rollSet.offset();
$(window).scroll(function () {
 //Check that the top of the object is within sight of the viewer
 var scrollTop = $(window).scrollTop();
 if(offset.top < scrollTop){
  rollSet.addClass('fixed');
 }else{
  rollSet.removeClass('fixed');
 }
});

The CSS code:

.fixed{position:fixed; top:20px;}
.fixed{_position:absolute; _top:expression((20+(noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');}// Compatible with IE6


Related articles: