jquery implementation side bar follow browser scrolling fixed display

Effect one: Side bar fixed module
Source: Lou Blog

JS Code

The code is as follows

Copy Code

Side bar Follow (function () { var odiv = document.getElementById ("float"); var H = 0, iE6; var Y = Odiv; while (Y) { H + + y.offsettop; Y = Y.offsetparent }; iE6 = window. ActiveXObject &&!window. XMLHttpRequest; if (!IE6) { Window.onscroll = function () { var s = Document.body.scrollTop | | Document.documentElement.scrollTop; if (S > H) { Odiv.classname = "Div1 div2"; if (iE6) { ODiv.style.top = (s-h) + "px"; } } else { Odiv.classname = "Div1"; } }; } Note: In order to reduce the JS file reference, this code can be placed in any JS file CSS code: * * Side bar Follow/ #box_float {float:left; position:relative; width:250px;} . div1 {width:250px} . div2 {position:fixed; _position:absolute; top:0; z-index:999;} Note: The style code is only for reference, specific adjustment, please combine your own website adjustment. HTML code: <div id= "Box_float" > <div id= "float" class= "Div1" > Here to write your website code and tags </div> </div>

Note: Here you can put a list of articles, affiliate ads, in short is a good way to improve the click rate. The WordPress user adds this code to the sidebar.php sidebar position.
Special Note: This code trial with any CMS system, but the special effects in the IE6 can not be implemented, the rest of the browser are no problem, while the rest of the sidebar should use static file calls, use JS call column will appear code overlap phenomenon, call the alliance ads no problem.

Effect two: Side bar with the window scrolling (sliding effect)
Source: Robin
To achieve this scrolling effect with the window, first the theme must load jquery. It's a perfect solution to the bug where the sidebar will roll down the footer indefinitely, and look at the code together:

The code is as follows

Copy Code

<script type= "Text/javascript" > var documentheight = 0; var toppadding = 15; $ (function () { var offset = $ ("#sidebar"). Offset (); Documentheight = $ (document). Height (); $ (window). Scroll (function () { var sidebarheight = $ ("#sidebar"). Height (); if ($ (window). scrolltop () > Offset.top) { var newposition = ($ (window). scrolltop ()-offset.top) + toppadding; var maxposition = documentheight-(sidebarheight + 368); if (Newposition > Maxposition) { Newposition = maxposition; } $ ("#sidebar"). Stop (). Animate ({ Margintop:newposition }); } else { $ ("#sidebar"). Stop (). Animate ({ margintop:0 }); }; }); }); </script>

Add the above JavaScript code to the theme header header.php template. Modify the #sidebar for your theme side selector name; adjust the number "368" according to the height of the head template of different themes.

Effect Three: Add sidebar scrolling effect with scroll bar (no sliding)
Source: The Free Wind Blog
Add some class flags to each module in the sidebar, as shown in the box below:

If your sidebar already has these class flags to differentiate, just use it and don't add it.
Add the following code to the theme's JS file:

The code is as follows

Copy Code

var Rollstart = $ ('. Statistics '),//when scrolling into this block begins to move RollOut = $ ('. Widgetmeta,. Statistics '); Hide the blocks after Rollstart Rollset = $ ('. Rrposts,. Tagscloud '); Move blocks before adding rollstart Rollstart.before (' <div class= "Rollbox" style= "Position:fixed;width:inherit;" ></div> '); var offset = Rollstart.offset (), Objwindow = $ (window), Rollbox = Rollstart.prev (); Objwindow.scroll (function () { if (Objwindow.scrolltop () > Offset.top) { if (rollbox.html (null)) { Rollset.clone (). Prependto ('. Rollbox '); } Rollout.fadeout (); Rollbox.show (). Stop (). Animate ({top:0,paddingtop:10},400); } else { Rollout.fadein (); Rollbox.hide (). Stop (). Animate ({top:0},400); } });

Note: The contents of the scrolling area can not be too long, otherwise there will be unlimited drop-down.

Effect four: JQUERY SCROLL FOLLOW

Sidebar Follow plugin
Plugin Address: Sidebar follow

The plugin from Wuzhao, when the page scrolls below the following area, the following area will be pinned to the window. Applies to all site sidebar. Compatible with IE8.

Please check this open source project for specific use, or it is more convenient. I hope I can learn JS as soon as possible, write some of their favorite good plug-ins to.

3 jquery Code
If the reference code is not convenient enough, and want to "lighten" the page as much as possible, you can also use the following code:

Js

Side bar Follow browser

The code is as follows

Copy Code

$ (function () { if ($ (". Fixed_side"). Length > 0) { var offset = $ (". Fixed_side"). Offset (); $ (window). Scroll (function () { var scrolltop = $ (window). scrolltop (); If the distance from the top is less than the distance the browser scrolls, the fixed property is added. if (Offset.top < scrolltop) $ (". Fixed_side"). AddClass ("fixed"); Otherwise clear the fixed CSS properties else $ (". Fixed_side"). Removeclass ("fixed"); }); } }); Css . fixed{position:fixed; top:20px; width:250px;}

There is also a sliding side bar with the window scrolling jquery code:

The code is as follows

Copy Code

<script> var documentheight = 0; var toppadding = 15; $ (function () { var offset = $ ("#sidebar"). Offset (); Documentheight = $ (document). Height (); $ (window). Scroll (function () { var sidebarheight = $ ("#sidebar"). Height (); if ($ (window). scrolltop () > Offset.top) { var newposition = ($ (window). scrolltop ()-offset.top) + toppadding; var maxposition = documentheight-(sidebarheight + 300); if (Newposition > Maxposition) { Newposition = maxposition; } $ ("#sidebar"). Stop (). Animate ({ Margintop:newposition }); } else { $ ("#sidebar"). Stop (). Animate ({ margintop:0 }); }; }); }); </script>

Modify #sidebar for your site sidebar selector name.