> 웹 프론트엔드 > JS 튜토리얼 > Jquery는 스크롤 막대 뒤에 고정 사이드바를 구현합니다(IE6과 호환 가능)_jquery

Jquery는 스크롤 막대 뒤에 고정 사이드바를 구현합니다(IE6과 호환 가능)_jquery

WBOY
풀어 주다: 2016-05-16 16:53:46
원래의
1355명이 탐색했습니다.

일부 쇼핑 웹사이트에서는 이 기능을 사용하여 장바구니나 제품 카테고리 탐색 기능을 배치합니다. 따라서 제품 페이지가 매우 긴 경우 사이드바가 항상 제 역할을 할 수 있도록 일부 웹사이트에서는 이 기능을 사용하여 사이드바에 광고를 게재합니다.

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과 호환
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿