Implementation of sliding fixed effects of the blog sidebar module following the scroll bar (js + jquery, etc)

When the content of a page is very long, the sidebar may appear too short. When the window slides down, the side loses the opportunity to display the content. Many news websites, such as Sina, Netease, and CSDN, will display more content in a fixed pop-up window in the lower right corner of the sidebar, however, this is not suitable for websites of the blog and web2.0 style.

Nowadays, many independent blogs and websites such as renrenren use the effect of moving the sidebar module along with the scroll bar. That is, when a page is very long, the content of the sidebar will follow the scroll bar. This effect applies to websites with many comments and long content. Zhiwen studio has investigated several implementation methods for similar functions and extracted them for reference.

Reference 1. Special Effects for increasing browser views: the scroll bar follows the sidebar.

Source: Lu songsong blog
Http://lusongsong.com/reed/453.html

The Code is as follows:

CSS section:

Copy codeThe Code is as follows:/* sidebar follows */
# Box {float: left; position: relative; width: 250px ;}
. Div1 {width: 250px ;}
. Div2 {position: fixed; _ position: absolute; top: 0; z-index: 250 ;}

Note: The Sidebar width of each website is different. You can adjust the div1 width based on the width of your webpage. my options are width: 250px. Add this code to your CSS file.

JS section:

JavaScript code

Copy codeThe Code is as follows: // follow the sidebar
(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.doc umentElement. 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 put into any JS file, for example, I put it in the util. js file.

Webpage code:

Copy codeThe Code is as follows: <div id = "box">
<Div id = "float" class = "div1">
Write your website code and tags here
</Div>
</Div>

Note: The article list and Alliance advertisement can be put here. In short, it is a good way to increase the click rate. Z-blogusers can just upload this code field to the sidebar of single.html.

Note: This code is used for trial and any CMS system, but this special effect cannot be implemented under IE6, and no problem is found in other browsers. At the same time, static files should be used for the rest of the content on the sidebar, when using JS to call a column, Code overlaps. It is okay to call the Alliance advertisement.

Refer to Section 2. Add the scroll effect of the sidebar with the scroll bar (example)

Source: Free wind blog (http://loosky.net /? P = 2028)

The procedure is as follows:

1. Add some class labels to each module on the sidebar
If you already have these class labels on the sidebar, you only need to use them. Adding an ID can also achieve the effect, but the w3c standard does not allow multiple identical IDs on the same page, so it is best to use the class style.

2. Add the following code to any js file on the website page:

JavaScript code

Copy codeThe Code is as follows: var rollStart = $ ('. Statistics'), // follow up when the block is scrolled.
Rolout = $ ('. WidgetMeta,. Statistics'); // hide the blocks after rollStart.
RollSet = $ ('. RRPosts,. TagsCloud'); // Add the follow-up block before 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 ');
}
Rolout. fadeOut ();
RollBox. show (). stop (). animate ({top: 0, paddingTop: 10}, 400 );
} Else {
Rolout. fadeIn ();
RollBox. hide (). stop (). animate ({top: 0}, 400 );
}
});

Note: The content of the rolling area cannot be too long. Otherwise, an infinite drop-down may occur.

Reference 3. JQUERY SCROLL FOLLOW

This is a plug-in. It is easy to add. Download the compressed package and decompress it to the website directory. Then, follow the steps.
For details, refer:
Http://kitchen.net-perspective.com/open-source/scroll-follow/

Example 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

The Sidebar module slides with the window (Example page)
Source: http://www.mb-wx.com/common/msay.js
This Code comes from the unintentional blog pjblog. The principle is very simple. When the window reaches the specified module position, it starts to determine the distance from the top and adjust it. This section of code is applied in the blog Sidebar of Zhiwen studio.

JavaScript code

Copy codeThe Code is as follows: // The Sidebar module slides with the 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
});
}
});
});
});