The sidebar follows the on-screen scrolling effect, which is now very popular. In particular, blogs and information types of Web sites, in the main page is relatively long case, side bar following the screen scrolling, can greatly increase the user viscosity, improve the PV site. So this is recommended in this classic JS special effects.
The use of this effect is very simple, the introduction of JS, in the sidebar to write a div, plus id:sidebar-follow. Write the contents inside.
Precautions:
First, id= "Sidebar-follow". This div seems to have to have content.
Second, need to add a width to the id:sidebar-follow, the width is generally the same as the width of the side bar.
Third, this special effect is native to JS. Please refer to the demo below for the native effect usage.
Four, there is also a jquery version, the use is as follows:
Download Sidebar-follow-jquery.js.
In turn, the jquery file, sidebar-follow-jquery.js file.
Add the following call JS to the page:
<script>
(New Sidebarfollow ()). Init ({
Element:jquery (' #sidebar-follow '),
distancetotop:0
});
</script>,
Native JS effect preview:
<! 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=utf-8 "/>
<title> side bar Follow screen scrolling effect </title>
<body>
<style type= "Text/css" >
body{margin:0; padding:0;}
. sidebar{width:728px; height:2000px border-right:1px solid #999;}
#sidebar-follow{width:728px background: #f6f6f6;}
#sidebar-follow p{font-size:12px; line-height:35px; padding:0 10px; margin:0;}
. box{height:200px; text-align:center; color: #fff; line-height:200px; Background: #999;}
</style>
<div class= "sidebar" >
<div class= "box" > Fixed content area </div>
<div id= "Sidebar-follow" >
<!--Here you can put scrolling content and put multiple div-->
<!--scrolling content to end-->
</div>
</div>
<script type= "Text/javascript" >
/**
* @author: mg12 [http://www.neoease.com/]
* @update: 2012/12/05
* @www. tonjay.com Note: This section JS can be saved as a JS file to invoke.
* @name: Sidebar-follow.js
*/
Sidebarfollow = function () {
This.config = {
Element:null,//Processing of nodes
distancetotop:0//node to the top of the page
};
This.cache = {
originaltotop:0,//original distance to the top of the page
Prevelement:null,//Previous node
Parenttotop:0,//parent node top to top up distance
Placeholder:document.createElement (' div ')//Placeholder node
}
};
Sidebarfollow.prototype = {
Init:function (config) {
this.config = Config | | This.config;
var _self = this;
var element = document.getElementById (_self.config.element);
var prevelement = document.getElementById (_self.config.prevelement);
If no node is found, no processing is performed
if (!element) {
Return
}
Gets the previous node
var prevelement = _self._getprevelement (Element);
while (Prevelement.offsetheight < 0) {
Prevelement = _self._getprevelement (prevelement);
if (!prevelement) {
Break
}
}
_self.cache.prevelement = prevelement;
Calculates the top and top distance of the parent node
var parent = Element.parentnode;
var parenttotop = _self._getcumulativeoffset (parent). Top;
var parentbordertop = parseint (Parent.style.borderTop, 10);
var parentpaddingtop = parseint (Parent.style.paddingTop, 10);
_self.cache.parenttotop = parenttotop + parentbordertop + parentpaddingtop;
Scrolling screen
_self._addlistener (window, ' scroll ', function () {
_self._scrollscreen ({element:element, prevelement:prevelement, _self:_self});
});
Change screen Size
_self._addlistener (window, ' Resize ', function () {
_self._scrollscreen ({element:element, prevelement:prevelement, _self:_self});
});
},
/**
* Modify Node Location
*/
_scrollscreen:function (args) {
var _self = args._self;
var element = Args.element;
var prevelement = args.prevelement;
var totop = _self.config.distancetotop;
If the body has a top attribute, eliminate these displacements
var bodytotop = parseint (document.getElementsByTagName (' body ') [0].style.top, 10);
if (!isnan (bodytotop)) {
Totop + = Bodytotop;
}
var elementtotop = 0;
if (element.style.position = = ' fixed ') {
Elementtotop = _self._getscrolly ();
} else {
Elementtotop = _self._getcumulativeoffset (Element). Top-totop;
}
var Elementtoprev = _self._getcumulativeoffset (prevelement). Top + _self._getvisiblesize (prevelement). Height;
When the node enters the following area, follow the scrolling
if (_self._getscrolly () > Elementtotop) {
Add a placeholder node
var elementheight = _self._getvisiblesize (Element). Height;
_self.cache.placeholder.style.height = elementheight + ' px ';
Element.parentNode.insertBefore (_self.cache.placeholder, Element);
Record the original location
_self.cache.originaltotop = Elementtotop;
Modify Style
Element.style.top = totop + ' px ';
element.style.position = ' fixed ';
Or get back in position.
else if (_self.cache.originaltotop > Elementtotop | | elementtoprev > Elementtotop) {
var parent = _self.cache.placeholder.parentnode;
if (parent) {
Remove a placeholder node
Parent.removechild (_self.cache.placeholder);
Modify Style
element.style.position = ' static ';
}
}
},
/**
* Gets the cumulative offset, which is the horizontal and vertical distance of the element to the upper-left corner of the page
*/
_getcumulativeoffset:function (Element) {
var offset = {
left:0,
top:0
};
do {
Offset.left + + Element.offsetleft | | 0;
Offset.top + + element.offsettop | | 0;
element = Element.offsetparent;
while (element);
return offset;
},
/**
* Get element visible dimensions (including edges and scroll bars)
*/
_getvisiblesize:function (Element) {
var dimension = {
width:0,
height:0
};
Dimension.width = Element.offsetwidth;
Dimension.height = Element.offsetheight;
return dimension;
},
/**
* Get the scroll bar longitudinal distance
*/
_getscrolly:function () {
if (typeof window.pageyoffset!= ' undefined ') {
return window.pageyoffset;
}
if (typeof document.compatmode!= ' undefined ' && document.compatmode!= ' Backcompat ') {
return document.documentElement.scrollTop;
}
return document.body.scrollTop;
},
/**
* Add Listener Events
*/
_addlistener:function (node, type, listener) {
if (Node.addeventlistener) {
Node.addeventlistener (type, listener, false);
return true;
else if (node.attachevent) {
Node[' E ' + type + listener] = listener;
Node[type + Listener] = function () {
Node[' E ' + type + listener] (window.event);
};
Node.attachevent (' on ' + type, Node[type + listener]);
return true;
}
return false;
},
/**
* Get the previous node
*/
_getprevelement:function (Element) {
var prev = element.previoussibling;
while (Prev.nodetype!== 1) {
prev = prev.previoussibling;
}
return prev;
}
};
</script>
<script>
/* <! [cdata[* *
(New Sidebarfollow ()). Init ({
element: ' Sidebar-follow ',
distancetotop:0
});
*]]> * *
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
