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

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

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

2. 在Vue实例中引入vue-headroom：

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

3. 在模板中使用VueHeadroom组件：

<vue-headroom>

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

</vue-headroom>

4. 设置vue-headroom参数：

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

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

</vue-headroom>

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

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

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

6. 然后，定义页面滚动时要执行的 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')
  }
}

7. 最后，定义吸顶时导航栏的 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);
}