vue项目实现导航栏吸顶功能

donghua201

已于 2023-10-18 17:02:46 修改

阅读量711

点赞数

分类专栏： vue常用业务需求 JavaScript CSS 文章标签：前端 javascript html

于 2023-09-27 15:31:40 首次发布

本文链接：https://blog.csdn.net/donghua201/article/details/133353128

版权

vue常用业务需求同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

JavaScript

22 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

粘性布局sticky - h5标签，有兼容性问题

/* sticky布局要单独设置，跟其他属性写在一起会失效 */
  .red {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .red {
    width: 100%;
    height: 100px;
    background-color: pink;
  }

  .green {
    width: 100%;
    height: 700px;
    background-color: yellow;
  }

  <body>
    <div class="red"></div>
    <div class="green"></div>
  </body>

原生JS实现

先使用js中获取进度条位置的属性scrollTop，兼容写法为：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

调用窗口滚动对象window.onscroll事件。当滚动页面的滚动条时会触发scroll里的事件方法。

建立判断条件，如果页面滚动的值超过导航栏的高度navHeight时，将导航栏的position属性值改为fixed，top值可以设置为0px。当页面回到顶端时，需要再次显示为原来默认的状态，所以把导航栏的position值改为默认的static。

<style>
  .red {
    width: 100%;
    height: 100px;
    background-color: pink;
  }

  .green {
    width: 100%;
    height: 700px;
    background-color: yellow;
  }
</style>

<template>
  <div class="red"></div>
  <div class="green">
    <p>内容区域</p>
  </div>
</template>

<script>
  window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    var red = document.querySelector('.red')
    if (scrollTop >= 100) {
      red.style.position = 'fixed'
      red.style.top = '0'
    } else {
      red.style.position = 'static'
    }
  }
</script>

参考：导航栏吸顶功能实现的两种方法_导航条下滑不吸顶-CSDN博客

donghua201

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue项目实现导航栏吸顶功能

建立判断条件，如果页面滚动的值超过导航栏的高度navHeight时，将导航栏的position属性值改为fixed，top值可以设置为0px。当页面回到顶端时，需要再次显示为原来默认的状态，所以把导航栏的position值改为默认的static。调用窗口滚动对象window.onscroll事件。当滚动页面的滚动条时会触发scroll里的事件方法。
复制链接

扫一扫