实现滚动到一定位置时，导航栏置顶的效果

最新推荐文章于 2022-05-11 16:51:32 发布

初来乍到到

最新推荐文章于 2022-05-11 16:51:32 发布

阅读量4.4k

点赞数 2

分类专栏： HTML jQ 文章标签：导航栏置顶悬浮置顶导航

本文链接：https://blog.csdn.net/weixin_43868692/article/details/89329613

版权

HTML 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

告别js用css实现滚动到一定位置时，导航栏置顶的效果。

<div class="nav">这里是导航栏所在的DIV容器。</div>

css代码：

.nav{
    position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
    top:0; /* 距离窗口顶部距离 */
    left:0; /* 距离窗口左边的距离 */
    width:100%; /* 宽度设置为100% */
    height:40px; /* 高度 */
    z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
 }

js版本置顶（19/07/29）

<style type="text/css">
    /*添加导航条的样式;
    */
     #native {
      background: blue;
      width: 100%;
      height: 20px;
      color: red;
      text-align: center;
    }

    .box {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      width: 100%;
      background: #fff;
      border-bottom: 1px solid #ebebeb;
      box-shadow: 0 0 5px #888;
    }
</style>
<body>
  <div id="native">悬浮置顶</div>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
  <p>悬浮置顶</p>
</body>
<script>
    //引入id标签;
    var navtive = $("#native");
    //设置监听事件;
    $(window).scroll(function () {
      var scrollHeight = $(document).scrollTop();
      console.log(scrollHeight)
      if (scrollHeight > 100) {
//添加类名样式
        navtive.addClass("box");
      } else if (scrollHeight == 0) {
//删除类名样式
        navtive.removeClass("box");
      }
//scrollHeight > 100 ? navtive.addClass("box") : navtive.removeClass("box");
    }); 
</script>

初来乍到到

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
实现滚动到一定位置时，导航栏置顶的效果

告别js用css实现滚动到一定位置时，导航栏置顶的效果。<div class="nav">这里是导航栏所在的DIV容器。</div>css代码：.nav{ position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */ top:0; /* 距离窗口顶部距离 */ left:0; /* 距离窗口左边的距离 */...
复制链接

扫一扫