WordPress边栏随窗口浮动


我们在浏览博客的时候,有时候文章或者很长,拉到底下的时候想点其他页面还点拉到最上面。就想着能不能修改一下,提高一下用户体验。
在网上找到的代码,效果可随便开一篇比较长的文章看。我把随机文章放在小工具的最后一个,当下拉时浏览器碰到随机文章的上边时,会把随机文章往下顶。

一、固定式随窗口浮动

方法1
1、加载外墙JQ库;
2、给需要浮动的边栏容器加上ID=”#float”;
3、加载浮动JS代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//边栏浮动
 var documentHeight = 0;
 var topPadding = 40;//与顶部距离
 $(function() {
 var offset = $("#float").offset();
 documentHeight = $(document).height();
 $(window).scroll(function() {
 var sideBarHeight = $("#float").height();
 if ($(window).scrollTop() > offset.top) {
 var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
 var maxPosition = documentHeight - (sideBarHeight + 350);//内容最大高度
 if (newPosition > maxPosition) {
 newPosition = maxPosition;
 }
 $("#float").stop().animate({
 marginTop: newPosition
 });
 } else {
 $("#float").stop().animate({
 marginTop: 0
 });
 };
 });
 });

这种方法简单易用。
方法2
1、JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//边栏浮动
    $(function() {
        $(window).scroll(function() {
            var scroll_top = $(window).scrollTop();            
            if ($('#scroll_box').length > 0) {
                var sb_top = $('#scroll_box').offset().top-20;
                if (sb_top < scroll_top) {
                    $('#scroll_box .slide-box-scroll').addClass('follow');
                } else {
                    $('#scroll_box .slide-box-scroll').removeClass('follow');
                }
            }
        });
    });

2、在sidebar.php里调用

1
2
3
4
5
6
7
<?php if( is_active_sidebar('widget_follow') ) { ?>
 <div id="scroll_box">
 <div class="slide-box-scroll">
 <?php dynamic_sidebar('widget_follow'); ?>
 </div>
 </div>
<?php }?>

3、CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
/*边栏浮动*/
.widget h3,.slide-box-scroll h2{
padding:5px;
text-transform:uppercase;
font-weight:bold;
font-size:14px;
line-height:1.5em;
border-bottom: 1px solid #ededed;}
#scroll_box .follow{
position:fixed;top:0;
margin-top:15px;
width:290px;
}

实现原理都是一样的,就是方法不同。
方法3、这是卢松松的代码。万能适用!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//侧栏跟随
(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";}
};
}
})();

二、弹性浮动,就是拉起来有跳动的特效,其实也就是换个JS罢了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//弹性浮动
jQuery(document).ready(function($){    
//将下一行引号中的内容替换成你想要下拉的模块 的ID或者CLASS名字,如"#ABC",".ABC"    
    var $sidebar   = $(".sidebar"),    
        $window    = $(window),      
        offset     = $sidebar.offset(),      
        topPadding = 20;//修改距顶间距
    $window.scroll(function() {      
        if ($window.scrollTop() > offset.top) {      
            $sidebar.stop().animate({      
                marginTop: $window.scrollTop() -  offset.top + topPadding      
            });      
        } else {      
            $sidebar.stop().animate({      
                marginTop: 0      
            });      
        }      
    });      
});

这个和第一种的固定浮动有些不同,这里只要在一个窗口中加入class=”sidebar”标签后,在这个容器之后的所有内容都会随着浮动!至于选择哪种,根据自己吧!

给我留言