Javascript Follow Plugin
Js following scrolling effect plugin
Support for defining multiple follow IDs, using CSS fixed attributes, not supporting IE6, and compatible with other mainstream browsers.
Support defines the minimum height of scrolling to the bottom and does not overwrite
When the page size is resize, the plug-in automatically resets the parameter
=======
Js following scrolling effect plugin
1. Support for defining multiple follow IDs, using CSS fixed properties, not supporting IE6, compatible with other mainstream browsers.
2. Support to define the minimum height of scrolling to the bottom, will not overwrite
3. After the page size resize, the plug-in will automatically reset the parameter
=======
How to use
The code is as follows |
|
<script type= "Text/javascript" src= "Follow.js" ></script> Window.onload = function () { var followids = [document.getElementById ("Follow"), document.getElementById ("Follow2")]; New Follow ({ Obj:followids, bottom:150 }); } |
Full instance
The code is as follows |
|
<! DOCTYPE html> <meta charset= "UTF-8" > <title>js follow</title> <style> html,body{width:100%;margin:0;padding:0;} Div{padding:0;margin:0;text-align:center;font-size:40px;font-weight:bold;color: #fff;} . Clear:after{content: "";d Isplay:block;height:0;clear:both;visibility:hidden;overflow:hidden;} . Clear{*zoom:1;} . wrap{width:1000px;margin:0 Auto;} . Header{width:100%;background: #1BA1E2; height:200px;line-height:300px;} . Footer{width:100%;background: #666; height:150px;line-height:100px;} . content{width:100%;margin:0 auto;background: #aaa;} . Left{width:70%;float:left;background: #8CBF26;} . Text{padding:50px;text-align:left;word-break:break-all;line-height:36px;font-size:16px;font-weight:normal ;} . Right{width:30%;float:left;} . aside{padding:10px 0px;margin-top:50px;background: #F09609; width:300px;height:150px;} . aside2{padding:10px 0px;background: #DB4F33;} </style> <body> <div class= "wrap" <div Class= "header" >header</div> <div class= "content clear" < Div class= "left" <div class= "text" How to use: <br/ 1. Loading plug-ins, after the page is loaded, window.onload = function () {}<Br/> 2. Creates an array of objects to follow, such as var followids = [document.getElementById ("Follow"), document.getElementById ("Follow2")];<br/> 3. Initialize follow:new Follow ();<br/> 4. Arguments, obj is an object array, bottom is the smallest height <br/> the scroll block is at the bottom; <pre style= "word-break:break-all;word-wrap:break-word;width:600px;" <script type= "Text/javascript" src= "Follow.js" ></SCRIPT> Window.onload = function () { var followids = [document.getElementById ("Follow"), document.getElementById ("Follow2")]; New Follow ({ Obj:followids, bottom:150 }); } </pre> </div> <br/><br/><br/><br/><br/><br/><br/><br/><br/> </div> <div class= "Right" > <div class= "Aside" id= "Follow" > Follow scrolling <br/> Module 1 </div> <div class= "Aside2" id= "Follow2" > Follow scrolling <br/> Module 2 </div> </div> </div> <div class= "Footer" >Footer</div> </div> <script type= "Text/javascript" src= "Follow.min.js" ></SCRIPT> <script> Window.onload = function () { var followids = [document.getElementById ("Follow"), document.getElementById ("Follow2")]; new Follow ({ obj:followids, bottom:150 }); } </script> </body> |