WordPress小工具浮动跟随效果

文章热度: 183 ℃ | 分类: WordPress图文教程

标签:

WordPress小工具浮动跟随效果

发表于: 2012 年 11 月 1 日 | 暂无评论

好的用户体验要体现在每一个细节,当你在浏览别人博客,文章很长的时候,拉到最下面发现边栏空空的什么也没有。这时,我们可以通过代码来实现,某个小工具浮动跟随的效果,来提高网站的用户体验度。

代码如下:

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($){  
//将下一行引号中的内容替换成你想要下拉的模块的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      
            });      
        }      
    });      
     
});

除非注明,网站文章均为原创,转载请标明本文地址
本文地址: http://www.wpbus.com.cn/wordpress-floating-follow.html





上一篇:
下一篇:

关于小编:爱博客、爱游戏、爱熬夜又爱睡觉。梦想环游世界,现实宅在家中...

新浪微博 | 腾讯微博 | 订阅我们