广告投放

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

目录

    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”。

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

    原文地址:www.zz2zz.com

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

    给TA打赏
    共{{data.count}}人
    人已打赏
    广告位招租919838898
    0 条回复 A文章作者 M管理员
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索