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

「自学哈网」jQuery实现WordPress侧边栏随窗口滚动

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

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

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

自学哈网 » 「自学哈网」jQuery实现WordPress侧边栏随窗口滚动
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号