블로그 사이드바 모듈이 스크롤 바를 따라 슬라이딩되는 고정 효과 구현 방법(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">

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

참고: 기사 목록과 제휴 광고를 여기에 배치할 수 있습니다. 즉, 클릭률을 높이는 좋은 방법입니다. Z-blog 사용자는 이 코드를 Single.html의 사이드바에 추가할 수 있습니다.

특별 팁: 이 코드는 모든 CMS 시스템에서 시도되지만 IE6에서는 특수 효과를 구현할 수 없습니다. 동시에 나머지 사이드바는 JS를 사용하여 호출해야 합니다. 열을 호출하면 코드가 중복되므로 제휴 광고 호출은 문제가 되지 않습니다.


참고 2. 스크롤바로 사이드바 스크롤 효과 추가(예시)

출처: 프리윈드 블로그(http://loosky.net/?p=2028)

단계는 다음과 같습니다.

1. 사이드바의 각 모듈에 클래스 플래그를 추가하세요. 사이드바에 이미 이러한 클래스 플래그가 있으면 추가하지 말고 사용하세요. ID를 추가하는 것도 효과를 얻을 수 있지만 w3c 표준에서는 동일한 페이지에 여러 개의 동일한 ID가 표시되는 것을 허용하지 않으므로 클래스 스타일을 사용하는 것이 가장 좋습니다.

2. 웹사이트 페이지의 js 파일에 다음 코드를 추가합니다.

JavaScript 코드

코드 복사

코드는 다음과 같습니다.

varrollStart = $('.Statistics'), //이 블록으로 스크롤할 때 따라가기 시작합니다.
rollOut = $('.WidgetMeta,.Statistics') //rollStart 블록을 숨긴 후
rollSet = $('.RRPosts,.TagsCloud'); //rollStart 전에 후속 블록 추가

rollStart.before('

');
var offset = RollStart.offset(),objWindow = $(window),rollBox = RollStart.prev();
objWindow.scroll(function () {
if (objWindow.scrollTop() > offset.top){
if(rollBox.html(null)){
rollSet.clone().prependTo(' .rollbox');
}
rollOut.fadeOut();
rollBox.show().stop().animate({top:0,paddingTop:10},400)
} else {
RollOut.fadeIn();
rollBox.hide().stop().animate({top:0},400)
}
});
참고: 스크롤 영역의 콘텐츠는 너무 길어서는 안 됩니다. 그렇지 않으면 무한 드롭다운이 발생합니다.

참고 3. JQUERY 스크롤 팔로우

이 플러그인은 추가 단계가 매우 간단합니다. 압축된 패키지를 다운로드하여 웹사이트 디렉터리에 추출한 후 다음 단계를 따르세요. 자세한 내용은

http://kitchen.net-perspective.com/open-source/scroll-follow/

를 참조하세요.
예제 페이지:
http://kitchen.net-perspective.com/sf-example-1.html

http://kitchen.net-perspective.com/sf-example-2.html

http://kitchen.net-perspective.com/sf-example-3.html
http://kitchen.net-perspective.com/sf-example-4.html

창과 함께 슬라이드되는 사이드바 모듈(샘플 페이지)
출처: http://www.mb-wx.com/common/msay.js

이 코드는 Muben Wuxin의 블로그(pjblog)에서 가져온 것입니다. 원리는 매우 간단합니다. 즉, 창이 지정된 모듈 위치에 도달하면 상단으로부터의 거리를 판단하고 조정하기 시작합니다. 이 코드는 Zhiwen Studio 블로그의 사이드바에 사용됩니다.

JavaScript 코드

코드 복사 코드는 다음과 같습니다./ /Sidebar 모듈이 창과 함께 슬라이드됩니다.

jQuery(document).ready(function($) {

$(function() { (window),
offset = $sidebar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
} );
}
})
})