JQuery scrolling effect with scroll bar (fixed version)
Code (based on jquery):
The code is as follows |
Copy Code |
Side Bar with move var Rollstart = $ ('. Feed-mail '),//when scrolling to this block begins to move Rollset = $ ('. Search,.weibo,.group,.feed-mail,.tags '); Move blocks before adding rollstart Rollstart.before (' <div class= "Da_rollbox" style= "Position:fixed;background-color: #fff; 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 ('. Da_rollbox '); } Rollbox.show (). Stop (). Animate ({top:0,paddingtop:15},400); } else { Rollbox.hide (). Stop (). Animate ({top:0},400); } }); |
More simple than the last, please note that the place, you need to add the module class or ID according to your requirements. It is worth noting that the background color of line fifth, the default is white!
TIPS:IE6 fans can add code that doesn't support fixed
JQuery scrolling effect with scroll bar (for content page long articles)
jquery scrolling follower block, the code is as follows:
The code is as follows |
Copy Code |
//sidebar follow var Rollstart = $ ('. Feed-mail '),//when scrolling to this block begins with the rollout = $ ('. Cookie-list ');//Hide the blocks after Rollstart Rollstart.before (' <div class= ' da_rollbox ' ></div> '); var offset = Rollstart.offset (), Objwindow = $ (window), Rollbox = Rollstart.prev (), rollset = $ ('. Search,. Weibo,.group '); The following block Objwindow.scroll (function () { if (objwindow.scrolltop () > Offset.top) { & Rollstart before adding the Nbsp; if (rollbox.html (null)) { rollset.clone (). Prependto ('. Da_rollbox '); &NBSP} rollout.fadeout (); rollbox.show (). Stop (). Animate ({margintop: Objwindow.scrolltop ()-offset.top + 20},400); } else { rollout.fadein (); rollbox.hide (). Stop (). Animate ({margintop:0}, 400); } }); |
There is already a full comment in the code, just write a few class or ID (preferably not id,w3c the ID cannot be reused