WordPress的侧栏小工具增加浮动跟随效果

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

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

PS ,需要jQuery库

代码如下:

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
            });
        }
    });
});

添加方法和上一个代码一样,这个效果还不错,但是如果页面加载的东西多的话会有卡的感觉。

评论已关闭!

目前评论:2   其中:访客  2   博主  0

  1. avatar ssxssx 1

    这个添加到哪个文件里 啊?