WordPress侧栏浮动跟随效果

发表于 2012年10月08日
WordPress

我们在浏览别人博客的时候，有时候文章或者很长，拉到底下的时候想点其他页面还点拉到最上面。就想着能不能修改一下，提高一下用户体验度。前些天在夜央的博客看到他写了一篇这样的教程，马上着手用上他分享的代码。效果是有，但是显的有些生硬。当往下拉到侧栏没有的时候，会突然出现一个模块，视觉过程不太友好。于是就放弃了，另觅他法。

百度谷歌上搜索了半天，找到了现在这个代码，效果可随便开一篇比较长的文章看。我把随机文章放在小工具的最后一个，当下拉时浏览器碰到随机文章的上边时，会把随机文章往下顶。

浮动跟随代码如下

jQuery(document).ready(function($){   
$.fn.smartFloat = function() {   
    var position = function(element) {   
        var top = element.position().top, pos = element.css("position");   
        $(window).scroll(function() {   
            var scrolls = $(this).scrollTop();   
            if (scrolls > top) {   
                if (window.XMLHttpRequest) {   
                    element.css({   
                        position: "fixed",   
                        top: 0   
                    });       
                } else {   
                    element.css({   
                        top: scrolls   
                    });       
                }   
            }else {   
                element.css({   
                    position: "absolute",   
                    top: top   
                });       
            }   
        });   
    };   
    return $(this).each(function() {   
        position($(this));                            
    });   
};   
//绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"   
$(".widget_bd_random_post_widget").smartFloat();   
});

jQuery(document).ready(function($){

$.fn.smartFloat = function() {

var position = function(element) {

var top = element.position().top, pos = element.css("position");

$(window).scroll(function() {

var scrolls = $(this).scrollTop();

if (scrolls > top) {

if (window.XMLHttpRequest) {

element.css({

position: "fixed",

top: 0

});

} else {

element.css({

top: scrolls

});

}

}else {

element.css({

position: "absolute",

top: top

});

}

});

};

return $(this).each(function() {

position($(this));

});

};

//绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"

$(".widget_bd_random_post_widget").smartFloat();

});

按照31行的注释做相应的修改，然后将修改后的代码放到主题需要加载的JS文件里即可。

还有另外一种漂浮的效果

代码如下，效果可以点击看这里。

jQuery(document).ready(function($){   
//将下一行引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"   
    var $sidebar   = $("#bd_random_post_widget-3"),      
        $window    = $(window),      
        offset     = $sidebar.offset(),      
        topPadding = 50;      
     
    $window.scroll(function() {      
        if ($window.scrollTop() > offset.top) {      
            $sidebar.stop().animate({      
                marginTop: $window.scrollTop() - offset.top + topPadding      
            });    
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});