jQuery实现WordPress侧边栏随窗口滚动

近日帮人做主题要求弄个侧边栏某个模块随窗口一起滚动,可能其他童鞋也想给主题加上这个小功能,贴出来,供大家参考。
jQuery实现Wordpress侧边栏随窗口滚动
wordpress

近日帮人做WordPress主题要求弄个侧边栏某个模块随窗口一起滚动,可能其他童鞋也想给主题加上这个小功能,贴出来,供大家参考。

方法一:

很简单,前提是你的主题必须已加载了jQuery。

把下面代码加到主题头部header.php模版中即可:

<script type="text/javascript">   
$(function() {
    var $sidebar   = $("#sidebar"),   
        $window    = $(window),   
        offset     = $sidebar.offset(),   
        topPadding = 15;   
    $window.scroll(function() {   
        if ($window.scrollTop() > offset.top) {   
            $sidebar.stop().animate({   
                marginTop: $window.scrollTop() - offset.top + topPadding   
            });   
        } else {   
            $sidebar.stop().animate({   
                marginTop: 0   
            });   
        }   
    });   
});   
</script>  

可根据不同的主题模版,自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器。

HotNews主题也可使用该功能,默认是整个侧边栏随窗口滚动,受主题布局功能限制,单独滚动某个模块效果不是很理想。

方法二:

本人未试过

$.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));                           
    });  
};  
$("#float").smartFloat();  
Wordpress

WordPress博客评论可见实现方法

2021-11-3 18:58:00

Wordpress

Wordpress单篇文章嵌入不同的RSS或Atom feed地址

2021-11-5 15:23:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索