欢迎光临
请一秒记住我们的网址:www.xinfans.com !

WordPress 主题侧边栏随窗口浮动


现在大部分 WordPress 主题其实都自带侧边栏随窗口浮动功能,但这类需求依然存在,今天小编教你如何不用 WordPress 插件轻松实现。

操作流程:

将下面的 javascript 代码插入到当前 WordPress 主题头部 header.php 模版中。修改其中的“#sidebar”为 WordPress 主题侧边选择器名称;根据不同的主题头部模版高度,适当调整其中的数字“368”。
<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>

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

赞(14) 加关注
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:WordPress 主题侧边栏随窗口浮动
文章链接:https://www.xinfangs.com/114.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

请一秒记住我们的网址:www.xinfans.com !

去投稿去留言

扫码关注公众号

非常感谢,让我们一起创建更加美好的网络世界!

关注公众号

加微信

登录

找回密码

注册