美文网首页
关于侧边栏定点隐藏问题

关于侧边栏定点隐藏问题

作者: Annzmy95 | 来源:发表于2017-08-17 19:16 被阅读0次

一些PC端的页面会有一个fixed定位的侧边导航栏,我们需要它定点隐藏

  • 首先,对侧边栏的隐藏用visibility:hidden,这样计算它距离顶部高度时不会因为display:none的问题出现计算误差
  • 计算具体顶部的高度,然后定点显示
    -如果在页面中部刷新页面,侧边栏不会出现,必须要先滚动一下,用trigger(scroll)解决。
  //CSS
  .side { position: fixed; left: 50%; margin-left: 540px; top:30px; z-index: 3; visibility: hidden;width:170px;}
  //JS
<script>
  var sTop = $(window).scrollTop();
  var nowTop = parseInt(sTop);
  //当页面滚动到距离顶部一定距离时显示右侧固定栏
  $(window).bind("scroll", function () {
    vHeight = $(window).height();
    sTop = $(window).scrollTop();
    nowTop = parseInt(sTop);
    //自定义高度
    if(vHeight<=922){
      $(".side").css('visibility','visible');
      $(".side").css('top','942px');
    }
    else{
      if (nowTop >= 942) {
        $(".side").css('visibility','visible');
        $(".side").css('position','fixed');
        $(".side").css('top','30px');
      }  
      else {
          $(".side").css('visibility','hidden')
      }
    }
  }).trigger('scroll'); 
</script>

相关文章

网友评论

      本文标题:关于侧边栏定点隐藏问题

      本文链接:https://www.haomeiwen.com/subject/hziurxtx.html