Javascript Follow Plugin
Js extension with rolling effect
Multiple IDs can be defined, and the css fixed attribute is used. ie6 is not supported and compatible with other mainstream browsers.
You can define the minimum height to scroll to the bottom without overwriting the bottom.
After page size resize, the plug-in will automatically reset the parameters
========
Js extension with rolling effect
1. Multiple IDs can be defined and the css fixed attribute is used. ie6 is not supported and compatible with other mainstream browsers.
2. You can define the minimum height to scroll to the bottom without overwriting the bottom.
3. After page size resize, the plug-in will automatically reset the parameters
========
Usage
| 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
});
} |
Complete instance
| The Code is as follows: |
|
|
<! DOCTYPE html>
<Html lang = "zh-CN">
<Head profile = "http://gmpg.org/xfn/11">
<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: ""; display: 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>
</Head>
<Body>
<Div class = "wrap">
<Div class = "header"> Header </div>
<Div class = "content clear">
<Div class = "left">
<Div class = "text">
Usage: <br/>
1. Load the plug-in. After loading the page, window. onload = function () {}< br/>
2. Create an array of objects to be followed, such as var followIds = [document. getElementById ("follow"), document. getElementById ("follow2")]; <br/>
3. initialize Follow: new Follow (); <br/>
4. Passing parameters. obj is an array of objects, and bottom is the smallest height from the scroll block to the bottom. <br/>
<Hr/>
<Pre style = "word-break: break-all; word-wrap: break-word; width: 600px;">
& Lt; script type = "text/javascript" src = "follow. js" & gt; & lt;/script & gt; Window. onload = function (){
Var followIds = [document. getElementById ("follow"), document. getElementById ("follow2")];
New Follow ({
Obj: followIds,
Bottom: 150
});
} </Pre>
</Div>
<Br/>
</Div>
<Div class = "right">
<Div class = "aside" id = "follow">
Scroll <br/> Module 1
</Div>
<Div class = "aside2" id = "follow2">
Scroll <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>
</Html> |
