JS effect following the float of the scroll bar

js| Follow | special effects

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:

<div class= "Xscrollstick" style= "left:0px;top:0px" >
Content ...
</div>

Example 2:

<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//not reproduced or used for commercial use without consent//********************//* 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\/c Ss\/xframe.css "//document.write (" <style> @import url ("+xscrollstickcssfilepath+");</style> ");//** Detect browser type *****var browsername= ""; Switch (Navigator.appName.toLowerCase ()) {case "Netscape": Browsername= "ns"; Case "Microsoft Internet Explorer": default:browsername= "ie"; break; * * Set initialization event ******switch (browsername) {CAsE "ns": Window.addeventlistener ("Load", _xscrollstick_init,false); Break Case "IE": default:window.attachEvent ("onload", _xscrollstick_init);} * * Initialization function ******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 ******function _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 ******function _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"; }//** General function Area ***//no//]]></script><style>.xscrollstick{position:absolute; padding:15px 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 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 Floating bar 2</div><div class= "Xscrollstick D3 "> i is floating bar 3</div><div class=" Xscrollstick D4 "> i is 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></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The page consists of two parts:

Paging File:

Code Copy 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 "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></pead><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 Floating bar 2</div><div class= "Xscrollstick D3" > I am Floating bar 3</div><div class= " Xscrollstick D4 "> i is 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></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Js:

<! [cdata[
//********************/
X series of Xscrollstick
Author: Hutia
Not reproduced or used for commercial purposes without consent
//********************/

/*
Description
X series is Hutia developed a series of JS code, with the corresponding CSS can be implemented fast custom tags
Currently, the browser type supported by Xscrollstick is: IE5.5, FF1.5

The Xscrollstick label is
<div class= "Xscrollstick" >
Content ...
</div>

Support Properties:
No
Support Method:
No
*/

* * Loaded into css*****
var xscrollstickcssfilepath= "Sp\/css\/xframe.css";
document.write ("<style> @import url (" +xscrollstickcssfilepath+ ");</style>");

* * Detection Browser type * * *
var browsername= "";
Switch (Navigator.appName.toLowerCase ()) {
Case "Netscape":
Browsername= "NS";
Break
Case "Microsoft Internet Explorer":
Default
Browsername= "IE";
Break
}

* * Set Initialization Event
Switch (browsername) {
Case "NS":
Window.addeventlistener ("Load", _xscrollstick_init,false);
Break
Case "IE":
Default
Window.attachevent ("onload", _xscrollstick_init);
}

* * Initialization function
function _xscrollstick_init () {
var allthescrollsticks=document.getelementsbytagname ("div");
for (Var i=0;i<allthescrollsticks.length;i++) {
if (/^ (Xscrollstick) | (Allthescrollsticks[i].classname.match) | (. + +xscrollstick) | (Xscrollstick +.+) | (. + +xscrollstick +.+)) $/)) _xscrollstick_event_doinit (Allthescrollsticks[i]);
}
Window_event_scroll ();
}

* * Event response function Area Hu Jintao

function _xscrollstick_event_doinit (Element) {
Initializing variables
Element.offx=element.offsetleft;
Element.offy=element.offsettop;

Set method
Element. Stick=_xscrollstick_method_stick;

Setting Up Events
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 (/^ (Xscrollstick) | (Allthescrollsticks[i].classname.match) | (. + +xscrollstick) | (Xscrollstick +.+) | (. + +xscrollstick +.+)) $/)) Try{allthescrollsticks[i]. Stick ();} catch (e) {}
}
}

* * Method function area of Hu Jintao
function _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
]]>

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 ....