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

代码收藏 欲思 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();   

});

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

还有另外一种漂浮的效果,代码如下,效果可以看 Scrolling Sidebar

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

});

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

来源: V说-《为WordPress的侧栏小工具增加浮动跟随效果》

转载请注明:欲思博客 » 为WordPress的侧栏小工具增加浮动跟随效果

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (6)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 有插件就可以实现了,但是滑动效果看着很死板。。。
    望星湖畔2014-07-25 16:35 回复