jquery는 화면 스크롤 효과 구현 code_jquery를 따릅니다.

우리는 많은 웹사이트에서 웹페이지를 스크롤할 때 광고나 웹페이지 내의 특정 작은 영역이 사라지지 않고 화면 어딘가에 떠다니는 것을 본 적이 있습니다. 특히 일부 지역 광고가 그렇습니다. 그러면 이것이 어떻게 달성됩니까? 이 기사에서는 Wutu Bang의 후속 화면 스크롤 코드를 인용하여 이 효과를 자세히 설명합니다.

1. 원본코드

다음은 Wutu Bang의 화면 스크롤 코드입니다. 해당 범위는 Wutu Bang 웹페이지 양쪽 사이드바와 화면을 더블클릭한 후 오른쪽에 표시되는 숨겨진 바입니다.

var $catalogueOffsetTop = $('aside#catalogue').offset().top;
var $archiveOffestTop = $('aside#archive').offset().top;
var $archiveOffestLeft = $('aside#archive').offset().left;
$(window).bind('scroll resize',function(){
// #right-area的跟随屏幕滚动效果
if($('#right-area').height() <= $(window).height()){
$('#right-area').stop(true,true).animate({'top': $(document).scrollTop() + 'px'},800);
}else if($('#right-area').height() > $(window).height() && $('#right-area').height() < $(document).height()){
// 这段范围内是最关键的，允许滑动
if(($(document).scrollTop() + $(window).height()) <= $('#right-area').height()){
$('#right-area').stop(true,true).css('top','0');
}else if(($(document).scrollTop() + $(window).height()) < $(document).height()){
$right_top = $(document).scrollTop() + $(window).height() - $('#right-area').height();
$('#right-area').stop(true,true).animate({'top': $right_top + 'px'},800);
}else{
$right_top = $(document).height() - $('#right-area').height();
$('#right-area').stop(true,true).css({'top': $right_top + 'px'});
//alert($(document).scrollTop() + $(window).height() - $(document).height());
}
}else if($('#right-area').height() >= $(document).height()){
$('#right-area').height($(document).height()).stop(true,true).css({'overflow':'hidden','overflow-y':'scroll'});
}
if($(document).scrollLeft() == 0){ // 只有在屏幕处于左侧的时候才进行下面的跟随滚动，同时需要注意下面的if($(window).width() > 1024)，是为了防止在小屏幕下还发生这种变化
// aside#catalogue的上下滑动
if($('aside#catalogue').outerHeight() < $(window).height()){
if($(document).scrollTop() <= $catalogueOffsetTop){
$('aside#catalogue').css({'position':'static','top':$catalogueOffsetTop});
if($(window).width() > 1024)$('#main').css({'padding-left':'0'});
}else{
$('aside#catalogue').css({'position':'fixed','top':'0'});
if($(window).width() > 1024)$('#main').css({'padding-left':$('aside#catalogue').outerWidth() + 5 + 'px'});
}
}else if($('aside#catalogue').height() >= $(window).height() && $('aside#catalogue').outerHeight() < ($('footer').offset().top - $catalogueOffsetTop)){
if(($(document).scrollTop() + $(window).height()) <= ($('aside#catalogue').outerHeight() + $catalogueOffsetTop)){
$('aside#catalogue').css({'position':'static','top':$catalogueOffsetTop});
if($(window).width() > 1024)$('#main').css({'padding-left':'0'});
}else if(($(document).scrollTop() + $(window).height()) < $('footer').offset().top){
$catalogue_top = $(window).height() - $('aside#catalogue').outerHeight() - 20;
$('aside#catalogue').css({'position':'fixed','top': $catalogue_top + 'px'});
if($(window).width() > 1024)$('#main').css({'padding-left':$('aside#catalogue').outerWidth() + 5 + 'px'});
}else{
$catalogue_top = $(window).height() - $('aside#catalogue').outerHeight() - 20 - ($(document).height() - $('footer').offset().top);
$('aside#catalogue').css({'position':'fixed','top':$catalogue_top + 'px'});
if($(window).width() > 1024)$('#main').css({'padding-left':$('aside#catalogue').outerWidth() + 5 + 'px'});
}
}
// aside#archive的上下滑动
if($('aside#archive').outerHeight() < $(window).height()){
if($(document).scrollTop() <= $archiveOffestTop){
$('aside#archive').css({'position':'static','top':$archiveOffestTop,'left':$archiveOffestLeft + 'px'});
}else{
$('aside#archive').css({'position':'fixed','top':'0','left':$archiveOffestLeft + 'px'});
}
}else if($('aside#archive').height() >= $(window).height() && $('aside#archive').outerHeight() < ($('footer').offset().top - $archiveOffestTop)){
if(($(document).scrollTop() + $(window).height()) <= ($('aside#archive').outerHeight() + $archiveOffestTop)){
$('aside#archive').css({'position':'static','top':$archiveOffestTop,'left':$archiveOffestLeft + 'px'});
}else if(($(document).scrollTop() + $(window).height()) < $('footer').offset().top){
$catalogue_top = $(window).height() - $('aside#archive').outerHeight();
$('aside#archive').css({'position':'fixed','top': $catalogue_top + 'px','left':$archiveOffestLeft + 'px'});
}else{
$catalogue_top = $(window).height() - $('aside#archive').outerHeight() - ($(document).height() - $('footer').offset().top);
$('aside#archive').css({'position':'fixed','top':$catalogue_top + 'px','left':$archiveOffestLeft + 'px'});
}
}
}else{ // 如果屏幕不处于左侧，就让这两个跟随归位
$('aside#catalogue').css({'position':'static','top':$catalogueOffsetTop});
$('#main').css({'padding-left':'0'});
$('aside#archive').css({'position':'static','top':$archiveOffestTop,'left':$archiveOffestLeft + 'px'});
}
}).scroll().resize();

이 문제를 해결하기 위한 7줄의 코드와 심지어 이 효과를 달성하기 위한 범용 플러그인을 포함하여 인터넷에 많은 관련 코드가 있습니다. 그러나 그것들은 모두 너무 일반적입니다. 웹사이트마다 특징이 다르기 때문에 일부 세부 사항에서는 더 많은 고려 사항이 필요합니다.

2. 화면 스크롤 방식을 선택하세요

세 가지 옵션이 있습니다.

1. position:absolute;를 사용한 다음 동적으로 상위 값을 할당합니다.
2. position:fixed;를 사용한 다음 동적으로 상위 값을 할당합니다. 3. padding-top 또는 margin-top을 동적으로 할당합니다.

처음 두 개는 position을 사용하여 요소의 위치를 ​​정렬합니다. float와 마찬가지로 position은 요소를 일반적인 텍스트 흐름 밖으로 끌어냅니다. 패딩 또는 마진 방법은 요소의 마진을 제어하여 달성됩니다. 어느 것이 더 낫습니까?

position:absolute;를 사용하면 스크롤할 때 흔들림이 발생합니다(Firefox에서는 아님). padding-top을 사용하면 배경이 보기 흉해 보이고 흔들림이 발생합니다. IE6을 지원하지 않습니다. margin-top을 시도하면 지터가 발생합니다. 이 코드는 지터를 유발하지 않는 유일한 솔루션인 position:fixed를 선택하지만 이 효과는 IE6에서는 발생하지 않습니다.

3. 고려해야 할 상황

우투강이 이 웹사이트의 코드를 설명하려는 이유는 인터넷상에 코드에 대한 상세한 분석이 없고, 많은 이슈들이 고려되지 않기 때문입니다.

1. 따라야 할 요소의 높이와 화면의 높이를 비교하세요

인터넷에 있는 모든 코드는 창의 높이보다 영역의 높이가 작은 상황을 고려하여 코드가 매우 간단합니다. 영역 높이가 창 높이와 같거나 클 경우 새로운 고려 사항이 있습니다.

2. 영역의 높이가 창을 초과하면 언제부터 스크롤을 따르기 시작하나요?

사용자에게 보여주고 싶은 것이 광고인지, 텍스트 단락인지, 목록인지에 따라 다릅니다. 내 디자인은 화면이 아래로 스크롤되지만 표시할 모든 요소가 완전히 표시되지 않은 경우 화면이 요소의 하단 임계점까지 스크롤되면 효과가 실행된다는 것입니다. 다시 말하지만, 요소의 아래쪽 가장자리는 화면의 아래쪽 가장자리와 정렬되므로 요소의 아래쪽 부분은 항상 화면 내에서 렌더링됩니다. 물론 웹 페이지마다 디자인이 다를 수 있습니다. 아래로 스크롤할 때 광고가 화면 상단에 정렬되어 스크롤되지 않도록 디자인할 수도 있습니다.

그림 1 화면 스크롤 로직 설계를 따르세요

그림 1의 디자인 아이디어를 살펴보겠습니다. 그림에서 녹색 부분은 스크롤할 영역이고, 회색 부분은 웹페이지 전체이며, 연한 회색 부분은 화면(볼 수 있는 영역)입니다. 연한 회색 화면을 아래로 움직여 스크롤 다운을 시뮬레이션합니다. . ① 단계는 초기 단계로, 별도의 조치 없이 웹페이지가 초기 상태 그대로 작동됩니다. ②단계에서는 화면이 임계점까지 아래로 스크롤됩니다. 즉, 스크롤 영역의 가장 낮은 끝을 따릅니다. 단계 ③은 임계점을 지나 스크롤한 후 요소가 화면과 함께 스크롤되기 시작하며 요소의 하단이 화면 하단과 정렬되고 요소의 상단이 더 이상 표시되지 않는 것을 볼 수 있습니다. 네 번째 단계에서는 화면이 맨 아래로 스크롤됩니다. 웹 페이지 맨 아래에 일부 저작권 정보가 있는 것으로 볼 수 있습니다. 따라서 요소는 이 정보를 덮기 위해 맨 아래로 스크롤할 수 없습니다. 더 이상 스크롤을 따르십시오.

아래로 스크롤하는 화면의 개략도입니다. 화면이 위로 스크롤되면 이 순서가 반대입니다. 하지만 또 다른 고려사항이 있는데, 화면을 위로 스크롤하면 초기 스크롤 다운과 동일한 효과를 얻을 수 있다는 것입니다. 즉, 이때 중요한 점은 위로 스크롤할 때의 녹색 영역의 상단입니다. 화면은 요소의 상단에 정렬됩니다. 기술적 어려움으로 인해 Wutu Gang은 이러한 효과를 얻지 못했습니다.

3. 숫자와 수량 계산

스크롤할 때 어떤 양이 변하고 어떤 양이 변하지 않는지 파악하고, 상수에서 변화를 찾고, 그 변화에서 상수를 찾아야 합니다. 즉, 명확한 마음을 유지하고 다양한 높이 관계를 계산하는 방법을 구별해야 합니다. .

그림 1에서는 높이 계산을 돕기 위해 파란색 수직선을 사용했고, 화면과 요소의 위치를 ​​나타내기 위해 빨간색 선을 사용했으며, 파란색 수직선을 a, b, c, d, e, f 6개 문단. 그렇다면 그들 사이의 양적 관계는 어떻게 변화하고 있습니까? (녹색 영역의 요소를 #myDiv로, 저작권 정보가 포함된 하단의 요소를 #footer로 정의합니다)

a+b+c+d+e+f=$(document).height();//文档高度，固定值

a= $('#myDiv').offset().top;//#myDiv顶部到文档顶部的初始值，随着滚动，$('#myDiv').offset().top将会变化

b=$('#myDiv').height();//元素的高度，固定值

a+b+c=$(window).scrollTop()=$(docment).scrollTop();//滚动条的位置，即文档顶端到当前屏幕顶端的距离，不断变化中

d=$(window).height();//屏幕的高度，固定值

f=$('#footer').height();//#footer的高度，固定值

a+b+c+d+e=$('#footer').offset().top=$(document).height()-$('#footer').height();//#footer顶部到文档顶部的距离，固定值，不过需要注意的是，$('#footer').offset().top+$('#footer').height()并非一定等于$(document).height()，你要看#footer下面是否已经没有了空白。

在整个变化过程中，变化的值只有$(window).scrollTop()=$(docment).scrollTop()和$('#myDiv').offset().top，因此我们要抓住这些值之间的加减数量关系，做好逻辑判断和赋值。

4、值在什么时候获取

你可以看到，我在scroll事件之前事先获取了

var $catalogueOffsetTop = $('aside#catalogue').offset().top;
var $archiveOffestTop = $('aside#archive').offset().top;
var $archiveOffestLeft = $('aside#archive').offset().left;

正是由于他们在scroll事件发生时会发生变化，因此要提前存放在变量中。

四、特殊情况特殊考虑

在写出这么多代码之前，我曾想过写出一个可以通用的代码，然而事情并非那么简单，在乌徒帮中，三个要滚动 的区域都具有特殊性，因此必须认真考虑他们的事件逻辑和仔细赋值。

1、元素是否自由随意

由于乌徒帮双击屏幕滑向右侧时出现的区域是自由的，顶部和底部没有阻挡信息，因此我们的处理更方便一些，不用获取顶部距离的初始值和考虑滚到底部时空出一段。但是仍然要考虑下面第2点，屏幕和元素高度的比较。

而对于边侧栏的滚到，我们要考虑边侧栏顶部到文档顶部还有一段距离，底部还有版权信息。滚到的位置要通过上文获得的值，再配合css中获得的值进行精确计算。

2、判断元素的高度和屏幕高度之间的关系

当元素高度小的时候，我们的处理比较简单，只需要将元素顶端和屏幕顶端对齐，和上面第1点结合，也会出现不同的情况：如果元素顶部到文档顶部还有一段距离的话，我们还不能屏幕一滚动就开始让它和屏幕顶端对齐，而必须滚到它的顶端这个临界点的时候才可以开始。

而当元素的高度大于屏幕的高度的时候，我们要进行更复杂的判断，和第1点判断何时开始跟随滚动：只有当屏幕的底端和元素底端对齐时，元素开始跟随屏幕滚动。

但是还有一种情况，即元素的高度超出了我们想要的高度，我们可以使用overflow来对元素进行处理，这时我们通过元素的高度和页面中一些固定值的比较来处理这一环节。乌徒帮通过比较右侧元素的高度和底部的关系来进行overflow的处理：

......
}else if($('#right-area').height() >= ($('footer').offset().top + $('footer').height())){
$('#right-area').height($('footer').offset().top + $('footer').height()).stop(true,true).css({'overflow':'hidden','overflow-y':'scroll'});
}

3、自己网页内特殊情况的变化

乌徒帮由于左右还可以滚动，因此产生了一系列问题，position:fixed时左右方向上元素的距离并没有固定值，因此在进行左右滚动时，元素会遮住滚动完的屏幕，因此我又对$(document).scrollLeft()进行了判断，进行了一些处理。

另外，乌徒帮还是一个自适应的网页设计网站，在不同宽度的屏幕上显示的效果也不同，js的特点是当屏幕发生变化时仍然起作用，因此，我也增加了屏幕宽度的判断。

总结

在跟随屏幕滚动这个问题上，原始的思路是很简单的，即通过本文列举的三种方案进行位置或距离的动态改变，然而，要在具体细节上把握好，必须对动态变化中的各个数值有所把握。于此同时，结合自己的网页，对不同情况下的动态效果有一个好的设计和规划，也是实现跟随屏幕滚动的关键环节。

以上这篇jquery跟随屏幕滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。