当前位置：首页 > VUE

vue实现菜单栏锚点

2026-01-12 08:27:52VUE

实现思路

在Vue中实现菜单栏锚点功能，可以通过监听滚动事件或使用Intersection Observer API来检测当前视口中的锚点位置，同时更新菜单栏的高亮状态。

基本实现步骤

安装依赖（如需要）

npm install vue-scrollto

创建锚点组件

<template>
  <div>
    <div class="menu">
      <a 
        v-for="(item, index) in sections" 
        :key="index"
        :class="{ active: currentSection === index }"
        @click="scrollTo(index)"
      >
        {{ item.title }}
      </a>
    </div>

    <div 
      v-for="(item, index) in sections" 
      :key="index"
      :id="`section-${index}`"
      class="content-section"
    >
      <h2>{{ item.title }}</h2>
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

<script>
import VueScrollTo from 'vue-scrollto'

export default {
  data() {
    return {
      currentSection: 0,
      sections: [
        { title: 'Section 1', content: '...' },
        { title: 'Section 2', content: '...' },
        { title: 'Section 3', content: '...' }
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    scrollTo(index) {
      this.currentSection = index
      VueScrollTo.scrollTo(`#section-${index}`, 500)
    },
    handleScroll() {
      const scrollPosition = window.scrollY

      this.sections.forEach((_, index) => {
        const section = document.getElementById(`section-${index}`)
        if (section) {
          const sectionTop = section.offsetTop
          const sectionHeight = section.clientHeight

          if (scrollPosition >= sectionTop && 
              scrollPosition < sectionTop + sectionHeight) {
            this.currentSection = index
          }
        }
      })
    }
  }
}
</script>

<style>
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
}

.menu a {
  margin: 0 10px;
  cursor: pointer;
}

.menu a.active {
  color: red;
  font-weight: bold;
}

.content-section {
  height: 100vh;
  padding: 60px 20px 20px;
}
</style>

优化方案

使用Intersection Observer API替代滚动事件监听，性能更优：

methods: {
  initObserver() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const id = entry.target.id
          this.currentSection = parseInt(id.split('-')[1])
        }
      })
    }, {
      threshold: 0.5
    })

    this.sections.forEach((_, index) => {
      const section = document.getElementById(`section-${index}`)
      if (section) observer.observe(section)
    })
  }
},
mounted() {
  this.initObserver()
}