wordpress一段短代码实现页面模块浮动

分享一段可以使页面模块浮动的代码。之前一直认为本博客的边栏是非常不理想的。文章长了或者评论多了导致single页面的右边栏缺角了似的。

最近找了下可以实现边栏随窗口下调浮动的代码。找过几个,都不是很理想,下面是我认为比较理想也确实简单可以实现这一功能的代码。这里分享给有需要的人。

<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 - 0);
                if (newPosition > maxPosition) { newPosition = maxPosition; }
                $("#sidebar").stop().animate({ marginTop: newPosition });
            } else { 
                $("#sidebar").stop().animate({ marginTop: 0 }); 
            };
        });
    });
</script>


代码我就不会解析了。看得懂的都不需要,看不懂的直接复制粘贴使用即可。 (sideBarHeight -0);这里的参数0(零)不是O可自己调制。

效果就是本博现在的右边栏。#sidebar(该模块可修改你想要实现浮动的模块)上面代码放到</body>之前即可。。。其他不解释....

相关阅读RelatedRead

Wordpress4.1自带Twenty Fifteen主题禁用谷歌字体

如此桌面你们造吗

石头剪刀布策略谈之'专家'

Windows下Ping一段IP地址的BAT

本站新的robots.txt写法

14年手机QQ叼炸天了

购物砍价是一个很不错的锻炼

7 条评论添加评论

好像也行!

回复取消回复
@左迪

嗯。不太好用。当时试过的。

回复取消回复

:evil: :evil: :evil: :evil: :evil:

回复取消回复

这个功能在使用上还是比较贴心的。

回复取消回复
@孙明月SEO

嗯。感觉还可以。只是本人不太会调网页css中高度宽度的问题。

回复取消回复

不喜欢浮动效果

回复取消回复
@耕博

嗯。局部浮动还是有点需要的,可以吸引用户眼球。。。

回复取消回复