臻享优惠价:最高返 500 抵扣券 → 查看活动!>>>

WordPress主题侧边栏随窗口滚动(解决无限加载)

WordPress 网页加上这个特效后,侧边模块在眼前晃晃悠悠的,并不是很舒服,适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱,大家接着折腾吧。 貌似这个特效目前很流行,之前也发过一篇《jQuery实现WordPress侧边栏随窗口滚动》的教程,不过有童鞋发现加上这个JS特效后,侧边栏会顶着...
WordPress主题侧边栏随窗口滚动(解决无限加载)
WordPress

网页加上这个特效后,侧边模块在眼前晃晃悠悠的,并不是很舒服,适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱,大家接着折腾吧。

貌似这个特效目前很流行,之前也发过一篇《jQuery实现WordPress侧边栏随窗口滚动》的教程,不过有童鞋发现加上这个JS特效后,侧边栏会顶着页脚无限滚下去,那就再发一个比较完美的,上代码:

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

将上述javascript代码加到主题头部header.php模版中。

修改其中的“#sidebar”为你的主题侧边选择器名称;

根据不同的主题头部模版高度,适当调整其中的数字“368”。

个人认为,网页加上这个特效后,侧边模块在眼前晃晃悠悠的,并不是很舒服,适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱,大家接着折腾吧。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
豆包可以帮你高效完成AI问答、AI对话、提供软件相关教程以及解决生活中遇到的各种疑难杂症,还能帮助你进行AI写作、AI绘画等等,提高你的工作学习效率。
!
你也想出现在这里?立即 联系我们吧!
信息
个人中心
购物车
优惠劵
今日签到
搜索