This is a JS effect that follows the float of the scroll bar, which means that the scroll bar scrolls and the elements are unchanged relative to the screen position.
There are many similar effects on the web, and this code has the following advantages:
1. Compatible ie6.0+ & ff1.5+
2. Very simple to use, belongs to the rookie favorite kind of bring to use, see the following description
3. There will be no conflict between elements, one page can have n effects, multiple elements using no code redundancy
Disadvantages are:
1. Can only be used in documents declared as XHTML
2. The element is best placed under the body
3. The inevitable flicker when scrolling (has been relatively slight, but the pursuit of perfection may feel uncomfortable)
Instructions for use:
In the page to reference the JS package, and then in need of special effects div set class for Xscrollstick can, of course, do not forget to write each element you want it fixed position
Example 1:
Copy Code code as follows:
<div class= "Xscrollstick" style= "left:0px;top:0px" >
Content ...
</div>
Example 2:
Copy Code code as follows:
<div class= "Xscrollstick positionstylename" >
Content ...
</div>
Demonstrate:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>xscrollstick demo</title> <script type=" Text/javascript ">//<! [cdata[//********************///X series Xscrollstick//Author: Hutia//without consent shall not be reproduced or used for commercial use//********************//* Description: X series is Hutia developed a series of JS code, with the corresponding CSS can be implemented fast custom tags currently xscrollstick support browser type: IE5.5, FF1.5 xscrollstick label <div class= " Xscrollstick "> Content ... </div> support properties: No support method: no *///** load css***** var xscrollstickcssfilepath=" sp\/css\ /xframe.css "; document.write ("<style> @import url (" +xscrollstickcssfilepath+ ");</style>"); * * Detect Browser Types * * * * * * * browsername=; Switch (Navigator.appName.toLowerCase ()) {case "Netscape": Browsername= "ns"; Break Case "Microsoft Internet Explorer": default:browsername= "ie"; Break } //** Set initialization event (Browsername) {case "ns": Window.addeventlistener ("Load", _xscrollstick_init,false); Break Case "IE": default:window.attachEvent ("onload", _xscrollstick_init); //** initialization function _xscrollstick_init () {var allthescrollsticks=document.getelementsbytagname ("div"); for (Var i=0;i<allthescrollsticks.length;i++) {if (Allthescrollsticks[i].classname.match) (/^ (XScrollStick) | (. + +xscrollstick) | (Xscrollstick +.+) | (. + +xscrollstick +.+)) $/)) _xscrollstick_event_doinit (Allthescrollsticks[i]); } window_event_scroll (); //** Event Response Function Area _xscrollstick_event_doinit (Element) {//initialization variable Element.offx=element.offsetleft; Element.offy=element.offsettop; Sets method element. Stick=_xscrollstick_method_stick; Set event switch (browsername) {case "ns": Window.addeventlistener ("scroll", window_event_scroll,false); Break Case "IE": default:window.attachEvent ("Onscroll", Window_event_scroll); }//Get Settings//No document.body.parentnode.onscroll=window_eVent_scroll; function Window_event_scroll () {var allthescrollsticks=document.getelementsbytagname ("div"); for (Var i=0;i<allthescrollsticks.length;i++) {if (Allthescrollsticks[i].classname.match) (/^ (XScrollStick) | (. + +xscrollstick) | (Xscrollstick +.+) | (. + +xscrollstick +.+)) $/)) Try{allthescrollsticks[i]. Stick ();} catch (e) {}}}//** method function area _xscrollstick_method_stick () {var x=this.offx, y=this.offy, po=this; this.style.position= "Absolute"; X+=document.body.parentnode.scrollleft; Y+=document.body.parentnode.scrolltop; this.style.left=x+ "px"; this.style.top=y+ "px"; //** Common Function Area * * *//No//]]> </script> <style> xscrollstick{position:absolute; padding:15px; BORDER:1PX solid black; width:120px; height:24px; }. D1 {left:0px;top:0px} . d2 {right:0px;top:0px} . d3 {left:0px;bottom:0px} . d4 {right:0px;bottom:0px} </style> </pead> <body > <div class= "xscrollstick D1" > I am floating strip </div> <div Class= "Xscrollstick D2" > i is a floating bar 2</div> <div class= "Xscrollstick D3" > I am Floating bar 3</div> <div " Xscrollstick D4 "> I am Floating bar 4</div> <div > Afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br > afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br >afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br> </div> </ Body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The page consists of two parts:
Paging File:
Code Copy Box
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>xscrollstick demo</title>
<script type= "Text/javascript" src= "Sp/js/xscrollstick.js" ></script>
<style>
. xscrollstick{
Position:absolute;
padding:15px;
BORDER:1PX solid black;
width:120px;
height:24px;
}
. D1 {left:0px;top:0px}
. d2 {right:0px;top:0px}
. d3 {left:0px;bottom:0px}
. d4 {right:0px;bottom:0px}
</style>
<body style= "Text-align:center;" >
<div class= "Xscrollstick D1" >
<a href= "http://www.163.com" > I am Floating bar </a>
</div>
<div class= "Xscrollstick D2" > I am a floating bar 2</div>
<div class= "Xscrollstick D3" > I am a floating bar 3</div>
<div class= "Xscrollstick d4" > I am a floating bar 4</div>
<div style= "top:0px;width:400px;height:2000px;" >
Afosdhfosdhg<br>
Afosdhfosdhg<br>afosdhfosdhg<br>
Afosdhfosdhg<br>afosdhfosdhg<br>
Afosdhfosdhg<br>afosdhfosdhg<br>
Afosdhfosdhg<br>afosdhfosdhg<br>
Afosdhfosdhg<br>afosdhfosdhg<br>
Afosdhfosdhg<br>
</div>
</body>
Js:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>xscrollstick demo</title> <script type=" Text/javascript ">//<! [cdata[//********************///X series Xscrollstick//Author: Hutia//without consent shall not be reproduced or used for commercial use//********************//* description : X series is Hutia developed a series of JS code, with the corresponding CSS can be implemented fast custom tags currently xscrollstick supported browser types: IE5.5, FF1.5 Xscrollstick labeled <div class= "XSCR Ollstick "> Content ... </div> support properties: No support method: no *///** load css***** var xscrollstickcssfilepath=" sp\/css\/x Frame.css "; document.write ("<style> @import url (" +xscrollstickcssfilepath+ ");</style>"); * * Detect Browser Types * * * * * * * browsername=; Switch (Navigator.appName.toLowerCase ()) {case "Netscape": Browsername= "ns"; Break Case "Microsoft Internet Explorer": default:browsername= "ie"; Break } * * Set initialization event (Browsername) {case "ns": Window.addeventlistener ("Load", _xscrollstick_init,false); Break Case "IE": default:window.attachEvent ("onload", _xscrollstick_init); //** initialization function _xscrollstick_init () {var allthescrollsticks=document.getelementsbytagname ("div"); for (Var i=0;i<allthescrollsticks.length;i++) {if (Allthescrollsticks[i].classname.match) (/^ (XScrollStick) | (. + +xscrollstick) | (Xscrollstick +.+) | (. + +xscrollstick +.+)) $/)) _xscrollstick_event_doinit (Allthescrollsticks[i]); } window_event_scroll (); //** Event Response Function Area _xscrollstick_event_doinit (Element) {//initialization variable Element.offx=element.offsetleft; Element.offy=element.offsettop; Sets method element. Stick=_xscrollstick_method_stick; Set event switch (browsername) {case "ns": Window.addeventlistener ("scroll", window_event_scroll,false); Break Case "IE": default:window.attachEvent ("Onscroll", Window_event_scroll); }//Get Settings//No Document.body.parentNode.onscrolL=window_event_scroll; function Window_event_scroll () {var allthescrollsticks=document.getelementsbytagname ("div"); for (Var i=0;i<allthescrollsticks.length;i++) {if (Allthescrollsticks[i].classname.match) (/^ (XScrollStick) | (. + +xscrollstick) | (Xscrollstick +.+) | (. + +xscrollstick +.+)) $/)) Try{allthescrollsticks[i]. Stick ();} catch (e) {}}}//** method function area _xscrollstick_method_stick () {var x=this.offx, y=this.offy, po=this; this.style.position= "Absolute"; X+=document.body.parentnode.scrollleft; Y+=document.body.parentnode.scrolltop; this.style.left=x+ "px"; this.style.top=y+ "px"; //** Common Function Area * * *//No//]]> </script> <style> xscrollstick{position:absolute; padding:15px; BORDER:1PX solid black; width:120px; height:24px; }. D1 {left:0px;top:0px} . d2 {right:0px;top:0px} . d3 {left:0px;bottom:0px} . d4 {right:0px;bottom:0px} </style> </pead> <body > <div class= "xscrollstick D1" > I am a floating bar </div> <div class= "Xscrollstick D2" > I am Floating bar 2</div> <div class= "Xscrollstick D3" > I am Floating bar 3</div> < Div class= "Xscrollstick d4" > I am Floating bar 4</div> <div > Afosdhfosdhg<br> afosdhfosdhg<br> Afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> Afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Ps:
The technical content of this work is lower than that of the first two ... No way, JS is one of the original purpose is special effects ....
