Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > javascript跟随滚动效果插件代码（javascript Follow Plugin）_javascript技巧

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

WBOY
Freigeben： 2016-05-16 17:27:01
Original
1145 Leute haben es durchsucht

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>
Nach dem Login kopieren

   

   









  

  

   

     跟随滚动
模块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>


 
Verwandte Etiketten：
插件 滚动 跟随
Quelle：php.cn
Vorheriger Artikel：jquery的相对父元素和相对文档定位示例代码_jquery Nächster Artikel：jQuery function的正确书写方法_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
CSS-Stile werden nicht auf die Website angewendet Ich erstelle eine Website mit Bootstrap5, aber die index.css-Eigenschaften werden nicht au...
Aus 2024-04-06 17:12:23
0
1
336
Die for-Schleife geht zufällig von 1 auf 0 Grundsätzlich kann sich die for-Schleife jedes Mal, wenn die Seite aktualisiert wird, von ...
Aus 2024-04-06 16:48:14
0
1
393
React Three Fiber: Warum verzögern sich meine Scroll-Ereignisse? In ReactThreeFiber habe ich eine React-Komponente, die ein Sprite generiert, das ich über ...
Aus 2024-04-06 13:39:24
0
1
410
Überarbeiteter Titel: Berechnen Sie die Gesamtsumme basierend auf der Auswahl des Kontrollkästchens Ich entwickle eine einfache Anwendung zur Finanzverfolgung. Im Antrag gibt es eine Tabelle...
Aus 2024-04-04 13:45:50
0
1
3465
Die Frage ist immer noch dieselbe, aber der Titel wurde wie folgt umgeschrieben: Meine Javascript-Zufallsfunktion generiert keine gültigen Antworten Ich erstelle ein einfaches Zufallszahlengenerator-Spiel mit JS und HTML. In diesem Spiel k...
Aus 2024-04-03 22:03:14
0
1
275
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage