Blog Sidebar module Follow the implementation of sliding fixed effect of scroll bar (js+jquery, etc.) _javascript skills

When a page content is very long, the sidebar may appear too short, when the window sliding to the bottom of the position, then the side is lost the opportunity to display content. Many news websites such as Sina, NetEase, CSDN, etc., will be in the lower right corner of the sidebar to a fixed small window form to provide more content to show the way, but this is not suitable for blogs and web2.0 style of the site.

Now a lot of independent blogs and web sites such as Renren, all use the side bar module with the scroll bar sliding position fixed effect. is when a page is very long, the setting sidebar content will follow the scroll bar, this effect is applicable to more commented, longer content of the site. The records studio investigated several similar functions of the implementation methods, excerpts for reference.

Refer to one, improve the browsing amount of special effects: Sidebar follow the scroll bar

Source: Lou Blog
Http://lusongsong.com/reed/453.html

The code is as follows:

CSS section:

Copy Code code as follows:

* * Side bar Follow/
#box {float:left; position:relative;width:250px;}
. div1{width:250px;}
. div2{position:fixed;_position:absolute;top:0;z-index:250;}

Note: Each site's sidebar width is different, can be based on the width of your Web page to adjust the width of div1, my is width:250px;, add this code to your CSS file.

JS section:

JavaScript code

Copy Code code as follows:

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: This code can be placed in any JS file, such as I put in the Util.js file.

Page Code section:

Copy Code code as follows:

<div id= "box" >
<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 Z-blog user adds this code to the single.html 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.

Reference two, add sidebar scrolling effect with scroll bar (sample)

Source: Free Wind blog (http://loosky.net/?p=2028)

The steps are as follows:

1, to the sidebar of the various modules plus some class logo
If your sidebar already has these class flags to differentiate, just use it and don't add it. Adding IDs can also achieve results, but the consortium standard does not allow multiple identical IDs to appear on the same page, so it is best to use the class style.

2, in the Site page of any JS file add the following code:

JavaScript code

Copy Code code as follows:

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.

Reference three, JQUERY SCROLL FOLLOW

This is a plug-in, add steps is also very simple, download the compressed package to the Site directory, and then follow the steps to operate.
Details can be referred to:
http://kitchen.net-perspective.com/open-source/scroll-follow/

Sample page:
Http://kitchen.net-perspective.com/sf-example-1.html
Http://kitchen.net-perspective.com/sf-example-2.html
Http://kitchen.net-perspective.com/sf-example-3.html
Http://kitchen.net-perspective.com/sf-example-4.html

Side bar Module slide with window (sample page)
Source: Http://www.mb-wx.com/common/msay.js
This code comes from the Woody unintentional blog (pjblog), which is simply that when the window reaches the specified module position, it starts to judge the distance from the top and adjusts it. This piece of code is applied in the blog sidebar of the log studio.

JavaScript code

Copy Code code as follows:

Side bar module slide with window
JQuery (document). Ready (function ($) {
$ (function () {
var $sidebar = $ ("#Side_relativelog"),
$window = $ (window),
offset = $sidebar. Offset (),
toppadding = 0;
$window. Scroll (function () {
if ($window. scrolltop () > Offset.top) {
$sidebar. Stop (). Animate ({
MarginTop: $window. scrolltop ()-Offset.top + toppadding
});
} else {
$sidebar. Stop (). Animate ({
margintop:0
});
}
});
});
});