jquery folgt der Implementierung des Bildschirm-Scroll-Effekts code_jquery

Wir haben auf vielen Websites gesehen, dass beim Scrollen der Webseite die Werbung oder ein bestimmter kleiner Bereich innerhalb der Webseite nicht verschwindet, sondern irgendwo auf dem Bildschirm schwebt, insbesondere bei einigen lokalen Werbungen. Wie wird das erreicht? In diesem Artikel wird Wutu Bangs Folgebildschirm-Bildlaufcode zitiert, um diesen Effekt im Detail zu erklären.

1. Originalcode

Das Folgende ist der Bildschirm-Scroll-Code von Wutu Bang. Sein Geltungsbereich umfasst die Seitenleisten auf beiden Seiten der Webseite von Wutu Bang sowie die versteckte Leiste auf der rechten Seite nach einem Doppelklick auf den Bildschirm.

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();

Es gibt viele verwandte Codes im Internet, darunter 7 Codezeilen zur Lösung dieses Problems und sogar universelle Plug-Ins, um diesen Effekt zu erzielen. Sie sind jedoch alle zu allgemein gehalten und weisen unterschiedliche Besonderheiten auf, sodass bei einigen Details weitere Überlegungen angestellt werden müssen.

2. Wählen Sie, wie mit dem Bildschirm gescrollt werden soll

Es gibt drei Optionen:

1. Verwenden Sie position:absolute; und weisen Sie dann dynamisch den Spitzenwert zu 2. Verwenden Sie position:fixed; und weisen Sie dann dynamisch den Spitzenwert zu 3. Weisen Sie padding-top oder margin-top dynamisch zu
Die ersten beiden verwenden Position, um die Position von Elementen anzuordnen. Wie Float zieht Position Elemente aus dem normalen Textfluss. Die Auffüll- oder Randmethode wird durch die Steuerung des Rands des Elements erreicht. Welches ist besser?

Die Verwendung von position:absolute; führt zu Jitter beim Scrollen (nicht in Firefox). Bei der Verwendung von padding-top werden Elemente mit Hintergrund hässlich aussehen und die Verwendung von position:fixed wird von IE6 nicht unterstützt habe es mit margin-top versucht, es sollte zittern. Dieser Code wählt position:fixed aus. Dies ist die einzige Lösung, die keinen Jitter verursacht. Dieser Effekt tritt jedoch unter IE6 nicht auf.

3. Zu berücksichtigende Situationen

Der Grund, warum Wutu Gang den Code dieser Website erklären möchte, liegt darin, dass es im Internet keine detaillierte Analyse des Codes gibt und viele Probleme nicht berücksichtigt werden.

1. Vergleichen Sie die Höhe des zu verfolgenden Elements mit der Höhe des Bildschirms

Alle Codes im Internet berücksichtigen die Situation, in der die Höhe des Bereichs geringer ist als die Höhe des Fensters, daher ist der Code sehr einfach. Wenn die Flächenhöhe gleich und größer als die Fensterhöhe ist, ergeben sich neue Überlegungen.

2. Wenn die Höhe des Bereichs das Fenster überschreitet, wann beginnt er, dem Scrollen zu folgen?

Es hängt davon ab, was wir dem Benutzer zeigen möchten, ob es sich um eine Werbung handelt, ob es sich um einen Textabschnitt handelt, ob es sich um eine Liste handelt. Mein Entwurf besteht darin, dass beim Scrollen des Bildschirms nach unten, aber nicht alle anzuzeigenden Elemente vollständig angezeigt werden, beim Scrollen auf dem Bildschirm der untere kritische Punkt des Elements ausgelöst wird Auch hier ist die Unterkante des Elements an der Unterkante des Bildschirms ausgerichtet, sodass der untere Teil des Elements immer innerhalb des Bildschirms gerendert wird. Natürlich unterscheidet sich Ihr Design für verschiedene Webseiten. Sie können es auch so gestalten, dass es beim Scrollen nach unten keine Wirkung hat.

Abbildung 1 Folgen Sie dem Logikdesign für das Scrollen des Bildschirms

Sehen wir uns diese Designidee aus Abbildung 1 an. Der grüne Teil im Bild ist der zu scrollende Bereich, der graue Teil ist die gesamte Webseite und der hellgraue Teil ist der Bildschirm (der sichtbare Bereich). Wir simulieren das Herunterscrollen, indem wir den hellgrauen Bildschirm nach unten bewegen . Phase ① ist die Anfangsphase. Zu diesem Zeitpunkt funktioniert die Webseite wie ursprünglich, ohne dass etwas unternommen wird. In Stufe ② scrollt der Bildschirm bis zu einem kritischen Punkt nach unten, d. h. er folgt dem untersten Ende des Scrollbereichs. Stufe ③ besteht darin, dass das Element nach dem Scrollen über den kritischen Punkt hinaus mit dem Bildschirm beginnt. Wir können sehen, dass der untere Rand des Elements am unteren Rand des Bildschirms ausgerichtet ist und der obere Rand des Elements nicht mehr sichtbar ist. In der vierten Phase scrollt der Bildschirm nach unten. Man kann sich vorstellen, dass sich unten auf der Webseite einige Copyright-Informationen befinden. Die Elemente können dem Scrollen nach unten nicht folgen, sodass die rote Linie nicht angezeigt wird Folgen Sie der Schriftrolle länger.

Dies ist ein schematisches Diagramm des nach unten scrollenden Bildschirms. Wenn der Bildschirm nach oben scrollt, ist dies die Umkehrung dieser Reihenfolge. Es gibt jedoch noch eine weitere Überlegung: Wenn der Bildschirm nach oben scrollt, wird der gleiche Effekt erzielt wie beim anfänglichen Scrollen nach unten Der Bildschirm ist an der Oberseite des Elements ausgerichtet. Aufgrund technischer Schwierigkeiten konnte Wutu Gang diesen Effekt nicht erzielen.

3. Berechnung von Zahlen und Mengen

Beim Scrollen müssen wir verstehen, welche Größen sich ändern und welche nicht, Änderungen in den Konstanten finden und die Konstanten in den Änderungen finden. Kurz gesagt, wir müssen einen klaren Kopf behalten und unterscheiden, wie verschiedene Höhenbeziehungen berechnet werden. .

In Abbildung 1 habe ich eine blaue vertikale Linie verwendet, um die Höhenberechnung zu unterstützen, eine rote Linie verwendet, um die Position des Bildschirms und der Elemente anzuzeigen, und die blaue vertikale Linie in a, b, c, d, e unterteilt. f Sechs Absätze. Was sind also die sich verändernden quantitativen Beziehungen zwischen ihnen? (Die Elemente im grünen Bereich definieren wir als #myDiv und den unteren inklusive der Copyright-Informationen als #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跟随屏幕滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。