How to implement the fixed effect of sliding the blog sidebar module following the scroll bar (js jquery, etc.)

How to implement the fixed effect of sliding the blog sidebar module following the scroll bar (js jquery, etc.)_javascript skills

WBOY

Release： 2016-05-16 17:39:40

Original

1724 people have browsed it

When the content of a page is very long, the sidebar columns may appear too short. When the window slides to the lower position, the opportunity to display the content is lost on the side. Many news and information websites, such as Sina, NetEase, CSDN, etc., will use a fixed small pop-up window in the lower right corner of the sidebar to provide more content display methods, but this is not suitable for blogs and web2.0 style websites.

Nowadays, many independent blogs and websites, such as Renren, etc., use the effect of having the sidebar module slide with the scroll bar and its position is fixed. That is, when a page is very long, set the side column content to follow the scroll bar. This effect is suitable for websites with many comments and long content. Zhiwen Studio has investigated several implementation methods of similar functions and excerpted them for reference.

Reference 1. Special effects to increase pageviews: sidebar follows scroll bar

Source: Lu Songsong’s Blog
http://lusongsong.com/reed/453.html

The code is as follows:

CSS part:

Copy code The 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 width of the sidebar of each website is different. You can adjust the width of div1 according to the width of your web page. Mine is width:250px;. Just add this code to your CSS file.

JS part:

JavaScript code

Copy code The code is as follows:

//Sidebar 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;                                                        ";}} 
                                                                                                                                                                                                                          Put it in any JS file, for example, I put it in the util.js file. 


Web page code part: 

Copy code

The code is as follows:

Write the code and tags of your website here

Note: Article lists and affiliate ads can be placed here. In short, it is a good way to increase click-through rates. Z-blog users can add this code to the sidebar of single.html. 

Special Tip: This code is tried with any CMS system, but the special effect cannot be implemented under IE6. Other browsers are fine. At the same time, the rest of the sidebar should be called using static files. Using JS to call the column will cause code overlap. , calling affiliate advertising is no problem.

Reference 2. Add the sidebar scrolling effect with the scroll bar (example)

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

The steps are as follows:

1. Add some class flags to each module of the sidebar If your sidebar already has these class flags to distinguish them, just use them without adding them. Adding ID can also achieve the effect, but the w3c standard does not allow multiple identical IDs to appear on the same page, so it is best to use class style.

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

JavaScript code

Copy code

The code is as follows:

var rollStart = $('.Statistics'), //Start to follow when scrolling to this block 
rollOut = $('.WidgetMeta,.Statistics'); //After hiding rollStart Blocks 
rollSet = $('.RRPosts,.TagsCloud'); //Add follow-up block before rollStart 

rollStart.before('
'); 
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 content in the scroll area cannot be too long, otherwise infinite drop-down will occur.

Reference 3. JQUERY SCROLL FOLLOW

This is a plug-in, and the steps to add it are very simple. Download the compressed package and extract it to the website directory, and then follow the steps.
For details, please refer to:
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 (sample page)
Source: http://www.mb-wx.com/common/msay.js
This code comes from Muben Wuxin’s blog (pjblog) , the principle is very simple, that is, when the window reaches the specified module position, it starts to judge its distance from the top and adjust it. This code is used in the sidebar of Zhiwen Studio blog.

JavaScript code

Copy code The code is as follows:

//Sidebar The module slides with the window. 
jQuery(document).ready(function($) { 
 $(function() { (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 
 }); 
 } 
 }); 
 }); 
}); 