jquery suit l'implémentation de l'effet de défilement d'écran code_jquery

Nous avons vu sur de nombreux sites Web que lorsque nous faisons défiler la page Web, les publicités ou une certaine petite zone de la page Web ne disparaissent pas, mais flottent quelque part sur l'écran, en particulier certaines publicités locales. Alors, comment y parvenir ? Cet article citera le code de défilement de l'écran de suivi de Wutu Bang pour expliquer cet effet en détail.

1.Code d'origine

Ce qui suit est le code de défilement de l'écran de Wutu Bang. Sa portée est les barres latérales des deux côtés de la page Web de Wutu Bang, ainsi que la barre cachée à droite après avoir double-cliqué sur l'écran.

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

Il existe de nombreux codes associés sur Internet, dont 7 lignes de code pour résoudre ce problème, et même des plug-ins universels pour obtenir cet effet. Cependant, ils sont trop généraux. Différents sites Web ont des particularités différentes, et certains détails doivent être examinés davantage.

2. Choisissez comment faire défiler avec l'écran

Il existe trois options :

1. Utilisez position:absolute; puis attribuez dynamiquement la valeur supérieure
2. Utilisez position:fixed; puis attribuez dynamiquement la valeur supérieure
3. Attribuez dynamiquement padding-top ou margin-top

Les deux premiers utilisent postion pour organiser la position des éléments. Comme float, position fait glisser les éléments hors du flux de texte normal. La méthode de remplissage ou de marge est obtenue en contrôlant la marge de l'élément. Lequel est le meilleur ?

L'utilisation de position:absolute; provoquera une instabilité lors du défilement (pas dans Firefox). Lors de l'utilisation de padding-top, les éléments avec des arrière-plans auront l'air laids et une instabilité se produira. L'utilisation de position:fixed ne prend pas en charge IE6. essayé margin-top, ça devrait trembler. Ce code sélectionne position:fixed, qui est la seule solution qui ne provoque pas de gigue, mais cet effet ne se produira pas sous IE6.

3. Situations à considérer

La raison pour laquelle Wutu Gang veut expliquer le code de ce site est qu'il n'y a pas d'analyse détaillée du code sur Internet et que de nombreux problèmes ne sont pas pris en compte.

1. Comparez la hauteur de l'élément à suivre avec la hauteur de l'écran

Tous les codes sur Internet considèrent la situation où la hauteur de la zone est inférieure à la hauteur de la fenêtre, le code est donc très simple. Lorsque la hauteur de la zone est égale et supérieure à la hauteur de la fenêtre, nous avons de nouvelles considérations.

2. Si la hauteur de la zone dépasse la fenêtre, quand commencera-t-elle à suivre le défilement ?

Cela dépend de ce que l'on veut montrer à l'utilisateur, s'il s'agit d'une publicité, s'il s'agit d'un paragraphe de texte, s'il s'agit d'une liste. Ma conception est que lorsque l'écran défile vers le bas, mais que tous les éléments à afficher n'ont pas été entièrement affichés, aucun effet ne sera effectué. Lorsque l'écran défile jusqu'au point critique inférieur de l'élément, l'effet est déclenché lors du défilement vers le bas. encore une fois, le bord inférieur de l'élément est aligné avec le bord inférieur de l'écran, de sorte que la partie inférieure de l'élément soit toujours restituée à l'intérieur de l'écran. Bien sûr, votre conception sera naturellement différente selon les pages Web. Vous pouvez également la concevoir de manière à ce qu'elle n'ait aucun effet lors du défilement vers le bas. Lorsque vous faites défiler vers le bas, l'annonce sera alignée avec le haut de l'écran et défilera.

Figure 1 Suivez la conception logique de défilement de l'écran

Jetons un coup d'œil à cette idée de conception de la figure 1. La partie verte de l'image est la zone à faire défiler, la partie grise est la page Web entière et la partie gris clair est l'écran (la zone visible) Nous simulons le défilement vers le bas en déplaçant l'écran gris clair vers le bas. . L'étape ① est l'étape initiale. A ce moment, la page Web fonctionne comme elle était initialement, sans aucune action. A l'étape 2, l'écran défile jusqu'à un point critique, c'est-à-dire qu'il suit l'extrémité la plus basse de la zone de défilement. L'étape ③ est qu'après avoir dépassé le point critique, l'élément commence à défiler avec l'écran. Nous pouvons voir que le bas de l'élément est aligné avec le bas de l'écran et que le haut de l'élément n'est plus visible. Dans la quatrième étape, l'écran défile vers le bas. On peut imaginer qu'il y a des informations de droit d'auteur au bas de la page Web. Les éléments ne peuvent pas suivre le défilement vers le bas pour couvrir ces informations, donc la ligne rouge ne le fera pas. ne suivez plus le parchemin.

Il s'agit d'un diagramme schématique de l'écran qui défile vers le bas. Lorsque l'écran défile vers le haut, c'est l'inverse de cette séquence. Mais il y a une autre considération. Lorsque l'écran défile vers le haut, cela produit le même effet que le défilement initial vers le bas, c'est-à-dire que le point critique est le haut de la zone verte dans ④ à ce moment-là. l'écran est aligné avec le haut de l'élément. En raison de difficultés techniques, Wutu Gang n'a pas obtenu cet effet.

3. Calcul des nombres et des quantités

Lors du défilement, nous devons comprendre quelles quantités changent et lesquelles ne changent pas, trouver des changements dans les constantes et trouver les constantes dans les changements. Bref, nous devons garder l'esprit clair et distinguer comment calculer les différentes relations de hauteur. .

Dans la figure 1, j'ai utilisé une ligne verticale bleue pour faciliter le calcul de la hauteur, j'ai utilisé une ligne rouge pour indiquer la position de l'écran et des éléments, et j'ai divisé la ligne verticale bleue en a, b, c, d, e, f Six paragraphes. Alors, quelles sont les relations quantitatives changeantes entre eux ? (Nous définissons les éléments dans la zone verte comme #myDiv et le bas incluant les informations de copyright comme #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跟随屏幕滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。