Native js implementation div following scroll bar plug-in

Source: Internet
Author: User

In many pages, you will see this type of div effect that follows the scroll bar, which is a fixed position. The following section encapsulates js following the scroll bar Plug-In due to project requirements. If you need it, you can refer to it.

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: Copy code

<Script type = "text/javascript" src = "follow. js"> </script> // This js is included in the demo. You can save it as follow. js and call it again.

Window. onload = function (){
Var followIds = [document. getElementById ("follow"), document. getElementById ("follow2")];
New Follow ({
Obj: followIds,
Bottom: 150
});
}

Test instance

The Code is as follows: Copy code

<! DOCTYPE html>
<Html lang = "zh-CN">
<Head profile = http://www.111Cn.net>
<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">

(Function () {var e = function (a) {var extends umentElement. clientHeight; B. minusHeight = B. bodyHeight-b.sawHeight-b.bottomHeight; B. newWrap = null; B. NewWrapHeight = null; B. addEventCheck (window, 'scroll ', function () {B. action ()}); B. addEventCheck (window, 'resize', function () {B. reset ()}; e. prototype = {addEventCheck: function (a, B, c) {if (. addEventListener) {. addEventListener (B, c, false)} else if (. attachEvent) {. attachEvent ('on' + B, c) }}, position: function (a) {var B = this; return. offsetParent? {X :(. offsetLeft + B. position (. offsetParent) ['X']), y :(. offsetTop + B. position (. offsetParent) ['y']) }:{ x:. offsetLeft, y:. offsetTop }}, action: function () {var a = this; var bits document.body.scrolltop+document.doc umentElement. scrollTop; if (B +. mTop>. posY) {. fixedFn (); if (. newWrap & B +. bottomHeight +. newWrapHeight>. bodyHeight) {var c = B +. bottomHeight +. newWrapHeight-a.bodyHeight; if (. sawHeight>. newWrapHeight) {c + =. sawHeight-a.newWrapHeight} else {c = 0; if (B>. minusHeight) {c = b-a.minusHeight};. setStyle (. newWrap, {'bottom ': c + 'px', 'top': 'auto'})} else {. showObj (. objArr); if (. newWrap) {. hideObj (. newWrap) }}, fixedFn: function () {var a = this; if (. newWrap) {. setStyle (. newWrap, {'bottom ': 'auto', 'top': '0px'});. hideObj (. objArr);. showObj (. newWrap)} else {. newWrap = document. createElement ('div '); var B = null; for (var c = 0; c <. arrLen; c ++) {B =. objArr [c]. cloneNode (true); B. setAttribute ('id', '');. newWrap. appendChild (B)};. setStyle (. newWrap, {'position': 'fixed', 'left':. posX + 'px ', 'top': '0px', 'bottom': 'auto'});. obj. parentNode. appendChild (. newWrap);. newWrapHeight =. newWrap. offsetHeight }}, hideObj: function (a) {var B = this; if (B. isArray (a) {var c =. length; for (var d = 0; d <c; d ++) {a [d]. style. display = 'none'} else {. style. display = 'none'}, showObj: function (a) {var B = this; if (B. isArray (a) {var c =. length; for (var d = 0; d <c; d ++) {a [d]. style. display = 'block'} else {. style. display = 'block'}, isArray: function (a) {return Object. prototype. toString. call (a) = '[object Array]'}, getStyle: function (a, B) {if (. currentStyle) {return. currentStyle [B]} else {return document. defaultView. getComputedStyle (a, null) [B] }}, setStyle: function (a, B) {for (var c in B) {. style [c] = B [c] }}, reset: function () {var extends umentElement. clientHeight;. minusHeight =. bodyHeight-a.sawHeight-a.bottomHeight; if (. newWrap) {. setStyle (. newWrap, {'left':. posX + 'px '})}. action () }}; window. follow = e }());
</Script>
<Script>
Window. onload = function (){
Var followIds = [document. getElementById ("follow"), document. getElementById ("follow2")];
New Follow ({
Obj: followIds,
Bottom: 150
});
}
</Script>
</Body>
</Html>

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.