jquery를 기반으로 한 스크롤 막대 스크롤 고정 div(데모 다운로드 포함)

집

웹 프론트엔드

JS 튜토리얼

jquery를 기반으로 한 스크롤 막대 스크롤 고정 div(데모 다운로드 포함)_jquery

May 16, 2016 pm 05:48 PM

스크롤바

예를 들어, Taobao 제품 세부 정보에서 스크롤 막대를 내리면 제품 세부 정보와 평가 탐색 기능이 수정됩니다. 이제 많은 웹사이트에서 비슷한 효과가 나타납니다. Yuanfang도 마찬가지입니다. 인터넷에서 코드를 검색한 결과 그 중 많은 코드가 지저분하고 쓸모가 없다는 사실을 발견했습니다. 그래서 제가 직접 작성해보았는데, 코드가 몇 줄로 아주 간단하지만, 아쉽게도 IE6과 호환되는 예제가 있다면 조언 부탁드립니다.

코드만 게시하세요.

코드 복사 코드는 다음과 같습니다.

 
<!DOCTYPE HTML PUBLIC "-/ /W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>demo</title> 
<script src="jquery -1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(문서).ready(함수( ){ 
var added = true; 
var top = $("#demo").offset().top 
function Add_Data() 
{ 
var scrolla=$(window ).scrollTop () 
var cha=parseInt(top)-parseInt( scrolla) 
if(loaded && cha<=0) 
{ 
$("#demo").removeClass ("demo2 ").addClass("demo1"); 
$("#demo").html("지금은 파란색입니다. 스크롤 막대를 위로 당기면 빨간색으로 표시됩니다. 수정했습니다.") ; 
loaded=false; 
} 
if(!loaded && cha>0) 
{ 
$("#demo").removeClass("demo1").addClass("demo2 " ; 🎜>} 
} 
$(window).scroll(Add_Data); 
}); 
</script> 
<style type="text/css"> ; 
.demo 
{ 
테두리: 1px 
너비: 300px; 
오버플로: 자동; 왼쪽; 
배경 색상: #ffffff; 
} 
.demo1 
{ 
위치: 
_위치: 절대; : 0px ; 
배경색: #0000ff; 
폭:300px 
색상:#ffffff; 
.demo2 
테두리: 1픽셀 #dcdcdc; 
여백: 10px; 
오버플로: 
배경색: #ff0000; 
높이:200px 
색상:#ffffff; 
} 
</head> 
<div class= "데모"> 
</div> 
</div> 
<div class="demo"> < /div> 
<div class="demo"> 
</div> 
<div class="demo2" id="demo"> 이제 아래로 스크롤하면 파란색으로 표시됩니다. 아직 고치지 않았습니다. 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
<div class="demo"> 
</div> 
</div> "데모"> 
</div> 
</html> 

 
실제로는 간단한 데모만 제공합니다. 개발 중에도 데모의 내용을 수정해야 합니다. 
온라인 데모: 
http://demo.jb51.net/js/2012/scrollfixed/

첨부파일: 
데모 다운로드