关于侧边栏定点隐藏问题

一些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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容