사이드바 scrolling_javascript 기술을 위한 간단한 구현 코드

웹사이트를 탐색할 때 일부 웹사이트에서 페이지 상단으로 스크롤한 후 측면 열의 일부 콘텐츠가 해당 위치에 고정되고 더 이상 스크롤 막대와 함께 스크롤되지 않는 경우를 자주 봅니다. 이 효과를 "사이드바 스크롤"이라고 합니다. 페이지 밖으로 스크롤하고 싶지 않은 콘텐츠에 유용합니다.
사이드바 스크롤을 구현하는 방법에는 두 가지가 있습니다. 이 두 가지 방법은 NEOEASE에서 작성한 기사에 명확하게 소개되어 있습니다. 일반적으로 jQuery 라이브러리를 로드할 필요가 없는 웹사이트에는 부담이 됩니다(jQuery는 이제 점점 더 커지고 있습니다...). 또 다른 방법은 네이티브 자바스크립트를 통해 효과를 작성하는 것입니다. 이 방법은 이전 방법보다 훨씬 가볍습니다. 하지만 여전히 만족스럽지 않습니다. 기본 JavaScript로 작성된 파일은 4K 이상이므로 단순성을 최우선으로 생각하는 저와 같은 사람에게는 여전히 너무 복잡합니다. 그렇다면 이를 구현하는 더 간단한 방법은 없을까?

물론 대답은 그렇습니다. 자세한 내용은 아래에 소개됩니다.
먼저 html 파일에 대해 이야기해 봅시다(물론 동적 파일일 수도 있고 그 안에 항상 html 코드가 있습니다)

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

🎜>여기에 스크롤해야 할 콘텐츠를 추가하세요

그런 다음 CSS 코드

코드 복사 코드는

#box{float:left; position:relative;width:250px;}

입니다. div1{너비:250px;}
.div2{위치: 고정;_위치:absolute;top:0;z-index:250;}


마지막으로 JS 코드입니다(배치 가능). 스크롤이 필요한 페이지나 별도의 JS 파일에서) 호출)

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

(function(){

var oDiv =document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H =Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest
if(!iE6){
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop
if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style .top=(s-H) "px";}}
else{oDiv.className="div1";}
}
}


좋아, 끝났습니다. 충분히 간단합니다.
마지막으로

예
를 들어주세요.