欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」WordPress主题侧边栏随窗口滚动(解决无限加载)

作者 : 自学哈 本文共885个字,预计阅读时间需要3分钟 2022-11-6 共123人阅读
也想出现在这里? 联系我们

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

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

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」WordPress主题侧边栏随窗口滚动(解决无限加载)
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号