communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > javascript跟随滚动效果插件代码（javascript Follow Plugin）_javascript技巧

javascript跟随滚动效果插件代码（javascript Follow Plugin）_javascript技巧

WBOY
Libérer： 2016-05-16 17:27:01
original
1146 Les gens l'ont consulté

Js 跟随滚动效果插件
支持定义多个跟随ID，采用css fixed属性，不支持ie6，兼容其他主流浏览器。
支持定义滚动到底部的最小高度，不会覆盖底部
页面大小resize后，插件会自动重置参数
=======
Js 跟随滚动效果插件
1.支持定义多个跟随ID，采用css fixed属性，不支持ie6，兼容其他主流浏览器。
2.支持定义滚动到底部的最小高度，不会覆盖底部
3.页面大小resize后，插件会自动重置参数
=======
使用方法
 代码如下
 

复制代码 代码如下:

 
window.onload = function(){
 var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
 new Follow({
  obj:followIds,
  bottom:150
 });
}
 

 完整实例
 代码如下
 
复制代码 代码如下:

 



Js Follow



 

 
Header

 

  

   

    使用方法：

    1.载入插件，在页面载入之后，window.onload = function(){}

    2.创建需要跟随的对象的数组，比如 var followIds = [document.getElementById("follow"),document.getElementById("follow2")];

    3.初始化Follow：new Follow();

    4.传参，obj是对象数组，bottom是滚动块距离底部的最小的高度

    

<br><script type="text/javascript" src="follow.js"></script><br>window.onload = function(){<br> var followIds = [document.getElementById("follow"),document.getElementById("follow2")];<br> new Follow({<br>  obj:followIds,<br>  bottom:150<br> });<br>}<br>
Copier après la connexion

   

   









  

  

   

     跟随滚动
模块1
   

   

     跟随滚动
模块2
   

  

 

 
Footer

 


<script><BR>window.onload = function(){<BR> var followIds = [document.getElementById("follow"),document.getElementById("follow2")];<BR> new Follow({<BR> obj:followIds,<BR> bottom:150<BR> });<BR>}<BR></script>


 
Étiquettes associées：
插件 滚动 suivre
source：php.cn
Article précédent：jquery的相对父元素和相对文档定位示例代码_jquery Article suivant：jQuery function的正确书写方法_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Styles CSS non appliqués au site Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...
Depuis 2024-04-06 17:12:23
0
1
336
la boucle for passe aléatoirement de 1 à 0 Fondamentalement, chaque fois que la page est actualisée, la boucle for a le potentiel de ...
Depuis 2024-04-06 16:48:14
0
1
393
React Three Fiber : Pourquoi mes événements de défilement sont-ils en retard ? Dans ReactThreeFiber, j'ai un composant React qui génère un sprite que je souhaite conserv...
Depuis 2024-04-06 13:39:24
0
1
410
Titre révisé : Calculer le total en fonction de la sélection d'une case à cocher Je développe une application simple de suivi financier. Dans l'application, il y a un tabl...
Depuis 2024-04-04 13:45:50
0
1
3465
La question est toujours la même, mais le titre est réécrit comme suit : Ma fonction aléatoire Javascript ne parvient pas à générer des réponses valides Je crée un simple jeu générateur de nombres aléatoires en utilisant JS et HTML. Dans ce je...
Depuis 2024-04-03 22:03:14
0
1
275
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal