使用Vue.js插件vue-headroom实现吸顶导航

最新推荐文章于 2025-10-27 10:31:02 发布

原创最新推荐文章于 2025-10-27 10:31:02 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5 #css #css3

文章介绍了如何利用Vue.js的vue-headroom插件以及纯JavaScript和CSS来实现页面的吸顶导航效果。首先，通过npm安装vue-headroom并引入到Vue实例中，然后在模板中使用VueHeadroom组件并设置参数。对于不使用插件的情况，文章给出了通过监听滚动事件，动态添加CSS类来实现导航栏吸顶的JavaScript代码，并提供了相应的CSS样式示例。

使用Vue.js插件vue-headroom实现吸顶导航：

安装vue-headroom：npm install vue-headroom --save

在Vue实例中引入vue-headroom：

import VueHeadroom from 'vue-headroom'
Vue.use(VueHeadroom)

在模板中使用VueHeadroom组件：

<vue-headroom>

   <nav>
      ......
   </nav>

</vue-headroom>

设置vue-headroom参数：

<vue-headroom :offset="50" :tolerance="5" :disabled="false" :classes="{'headroom--pinned': 'headroom--unpinned'}">

   <nav>
      ......
   </nav>

</vue-headroom>

使用普通的JavaScript + CSS来实现：

首先，在 HTML 中定义导航栏：

<nav id="navbar">
......
</nav>

然后，定义页面滚动时要执行的 JavaScript：

// 当页面滚动时执行
window.onscroll = () => {
  // 获取导航栏 DOM 元素
  const navbar = document.getElementById('navbar')
  // 获取页面顶部距离窗口顶部的位置
  const scrollTop = window.pageYOffset
  // 设置吸顶的阈值（距离页面顶部的距离）
  const threshold = 50
  // 如果页面滚动超过阈值，让导航栏吸住
  if (scrollTop > threshold) {
    navbar.classList.add('sticky')
  } else {
    navbar.classList.remove('sticky')
  }
}

最后，定义吸顶时导航栏的 CSS 样式：

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1000;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
}

#navbar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1000;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
}