• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress CMS主题如何让侧边栏跟随滚动条固定不动?【在下拉滚动到侧边栏高度时】

    wordpress CMS主题如何让侧边栏跟随滚动条固定不动?【在下拉滚动到侧边栏高度时】

    作者: 分类:wordpress CMS主题制作 点击: 644 次
    wordpress CMS主题:ssmay主题

      在开发wordpress CMS主题时,在文章页面,可能由于左侧的文章内容特别多,而导致右侧的侧边栏在滚动条下拉到一定位置时是空白(如下图-1),再往下拉,右侧就会什么东西都没有了。这时,作为开发者,我们可以让侧边栏在滚动条下拉到 侧边栏 底部时,让侧边栏置顶旋挂在右侧跟随滚动条固定不动(如下图-2)。

      wordpress CMS主题如何让侧边栏跟随滚动条固定不动?【在下拉滚动到侧边栏高度时】

      wordpress CMS主题如何让侧边栏跟随滚动条固定不动?【在下拉滚动到侧边栏高度时】

      下面,我们就来实现wordpress主题 的侧边栏随滚动条下拉而固定不动跟随。

      在wordpress主题的single.php文件中添加如下JS代码:

      <script>
      $(function(){
      var offset_left = $(".body").offset().left; //body左边距 = 右边距
      var sidebar_w = $(".sidebar").width(); //侧边栏宽度
      var sidebar_h = $(".sidebar").outerHeight(); //侧边栏高
      var sidebar_top = $(".sidebar").offset().top; //侧边栏上边距

      $(document).scroll(function(){
      var scroll_h = $(document).scrollTop(); //滚动条高度
      if( scroll_h > (sidebar_top+sidebar_h) ){ //当滚动条高度 > 侧边栏底部到顶部的高
      $(".sidebar").addClass("fixed");  //给侧边栏添加fixed类
      $(".fixed").css({
      'width':sidebar_w+'px', //设置宽度
      'right':offset_left+'px' //设置右边距
      });
      }else{ //如果滚动条高度 <  侧边栏底部到顶部的高
      $(".sidebar").removeClass("fixed");  //去除侧边栏的fixed类
      }
      })
      });
      </script>

      在wordpress主题的style.css添加如下样式:

      .fixed{
      position:fixed;
      right:0; top:0;
      width:310px;
      z-index:66;
      }

      这里使用了CSS的定位fixed,这个定位是相对于document的,如果设置 right:0 时,会依靠流量器窗口的右边,会与我们网页主体有距离——与原始侧边栏位置x轴有偏离。为了让固定后的侧边栏与原始侧边栏在X轴的位置一至,我们要获取网页主体的右边距:主体距离浏览器右边的距离,因为网页主体是居中的,所以右边距=左边距,即var offset_left = $(".body").offset().left;【body左边距 = 右边距】。

      实现原理:如果滚动条下拉的高度超过侧边栏底部的时候,我们就为侧边栏添加fixed类,并且设置fixed类的CSS样式为position:fixed 。



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201807015793.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“wordpress CMS主题如何让侧边栏跟随滚动条固定不动?【在下拉滚动到侧边栏高度时】”

    1. gao说道:

      wordpress主题如何让侧边栏跟随滚动条固定不动

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.