블로그 사이드바 모듈이 스크롤 바를 따라 슬라이딩되는 고정 효과 구현 방법(js jquery 등)_javascript 기술

페이지의 내용이 너무 길면 사이드바 열이 너무 짧게 나타날 수 있습니다. 창을 아래쪽으로 슬라이드하면 측면에 내용을 표시할 기회가 사라집니다. Sina, NetEase, CSDN 등과 같은 많은 뉴스 및 정보 웹사이트에서는 더 많은 콘텐츠 표시 방법을 제공하기 위해 사이드바 오른쪽 하단에 고정된 작은 팝업 창을 사용하지만 이는 블로그 및 web2에는 적합하지 않습니다. .0 스타일 웹사이트.

요즘 Renren 등 많은 독립 블로그와 웹사이트에서는 사이드바 모듈이 스크롤바와 함께 슬라이드되고 위치가 고정되는 효과를 사용하고 있습니다. 즉, 페이지가 매우 긴 경우, 사이드 컬럼 내용이 스크롤바 뒤에 오도록 설정하는 것입니다. 이 효과는 댓글이 많고 내용이 긴 웹사이트에 적합합니다. Zhiwen Studio는 유사한 기능의 여러 구현 방법을 조사하고 참고용으로 발췌했습니다.

참고 1. 페이지뷰 증가 특수 효과: 스크롤바를 따라가는 사이드바

출처: 루송송 블로그
http://lusongsong.com/reed/453.html

코드는 다음과 같습니다.

CSS 부분:

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

/*Sidebar 다음* /
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0 ;z -index:250;}

참고: 웹사이트마다 사이드바의 너비가 다릅니다. 웹페이지의 너비에 따라 div1의 너비를 조정할 수 있습니다. 이 코드를 CSS 파일에 추가하세요.

JS 부분:

JavaScript 코드

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

//사이드바 팔로우
(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;                                              ";}} 
                      ~                                                               JS 파일에 넣으세요. 예를 들어 저는 util.js 파일에 넣습니다.

웹페이지 코드 부분:

코드 복사

코드는 다음과 같습니다.

< ;div id= "box">

여기에 웹사이트의 코드와 태그를 작성하세요