일부 쇼핑 웹사이트에서는 이 기능을 사용하여 장바구니나 제품 카테고리 탐색 기능을 배치합니다. 따라서 제품 페이지가 매우 긴 경우 사이드바가 항상 제 역할을 할 수 있도록 일부 웹사이트에서는 이 기능을 사용하여 사이드바에 광고를 게재합니다.
jQuery 코드:
var RollSet = $('#Roll');// 객체를 확인하세요. #sidebar-tab은 스크롤바로 고정할 ID이며 필요에 따라 변경할 수 있습니다.
var offset = RollSet.offset ();
$( window).scroll(function () {
// 객체의 상단이 브라우저의 가시 범위 내에 있는지 확인
var scrollTop = $(window).scrollTop( );
if(offset.top < ; scrollTop){
rollSet.addClass('fixed');
}else{
rollSet.removeClass('fixed');
}
});
CSS 코드:
.fixed{ position:fixed; top:20px;}
.fixed{_position:absolute; _top:expression((20 (noValue = document.documentElement.scrollTop ? document. documentElement.scrollTop : document.body.scrollTop)) 'px' );}//IE6과 호환