### 实现 `el-
anchor` 双层嵌套
锚点跟随滚动的效果
要实现 `el-
anchor` 的双层嵌套
锚点跟随滚动效果，可以基于 V
ue 和 Element-UI 提供的功能扩展自定义逻辑。以下是详细的解决方案：
#### 1. 基本原理
通过监听页面的滚动事件，动态计算当前视口中的活动
锚点，并更新到对应的
菜单项中。对于双层嵌套的情况，需要分别处理外层和内层的
锚点。
#### 2. HTML 结构设计
构建一个包含两层结构的
锚点布局，其中外层为大模块，内层为细分的小节。
```html
<template>
<div class="
anchor-container">
<!-- 导航栏 -->
<el-
menu :default-active="activeOuterLink" @select="handleOuterSelect">
<el-sub
menu v-for="(item, index) in outerLinks" :key="index" :index="String(index)">
<template slot="title">{{ item.title }}</template>
<el-
menu-item-group>
<el-
menu-item
v-for="(subItem, subIndex) in item.subItems"
:key="`${index}-${subIndex}`"
:index="`${index}-${subIndex}`"
>
{{ subItem }}
</el-
menu-item>
</el-
menu-item-group>
</el-sub
menu>
</el-
menu>
<!--
锚点内容区域 -->
<div ref="contentContainer" class="content-area">
<el-
anchor :offset="50" @change="on
AnchorChange">
<el-link
v-for="(outerItem, outerIndex) in outerLinks"
:key="'link-' + outerIndex"
:href="'#' + outerItem.id"
>
<h2 :id="outerItem.id">{{ outerItem.title }}</h2>
<p>这是{{ outerItem.title}}的内容</p>
<el-
anchor :offset="50">
<el-link
v-for="(innerItem, innerIndex) in outerItem.innerContent"
:key="'inner-' + outerIndex + '-' + innerIndex"
:href="'#' + innerItem.id"
>
<h3 :id="innerItem.id">{{ innerItem.text }}</h3>
<p>{{ innerItem.description }}</p>
</el-link>
</el-
anchor>
</el-link>
</el-
anchor>
</div>
</div>
</template>
```
---
#### 3. JavaScript 实现逻辑
在 V
ue 组件中编写相应的脚本来支持双层
锚点的自动高亮功能。
```javascript
<script>
export default {
data() {
return {
activeOuterLink: "", // 当前激活的外层链接索引
activeInnerLink: "", // 当前激活的内层链接索引
outerLinks: [
{
title: "部分A",
id: "part-a",
subItems: ["章节A1", "章节A2"],
innerContent: [
{ text: "小节A1-1", description: "描述...", id: "section-a1-1" },
{ text: "小节A1-2", description: "更多细节...", id: "section-a1-2" }
]
},
{
title: "部分B",
id: "part-b",
subItems: ["章节B1", "章节B2"],
innerContent: [
{ text: "小节B1-1", description: "另一个例子...", id: "section-b1-1" },
{ text: "小节B1-2", description: "继续深入...", id: "section-b1-2" }
]
}
]
};
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
handleOuterSelect(key) {
const [outerKey] = key.split("-"); // 解析选中外层还是内层
this.activeOuterLink = outerKey;
},
on
AnchorChange(activeLinkId) {
// 更新当前激活的状态
this.outerLinks.forEach((item, index) => {
if (item.id === activeLinkId) {
this.activeOuterLink = String(index);
} else {
item.innerContent.forEach(innerItem => {
if (innerItem.id === activeLinkId) {
this.activeOuterLink = String(index); // 同步外层状态
this.activeInnerLink = `${index}-${innerItem.id}`;
}
});
}
});
},
handleScroll() {
const elements = Array.from(
document.q
uerySelectorAll(".content-area h2, .content-area h3")
);
const scrollPosition =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
let currentActiveId = null;
elements.some(el => {
if (
el.offsetTop - 50 <= scrollPosition &&
el.offsetTop + el.offsetHeight > scrollPosition
) {
currentActiveId = el.id;
return tr
ue; // 找到了匹配的元素
}
return false;
});
if (currentActiveId !== this.activeOuterLink && currentActiveId !== this.activeInnerLink) {
this.on
AnchorChange(currentActiveId);
}
}
}
};
</script>
```
---
####
4. CSS 样式调整
为了提升用户体验，可以通过平滑滚动动画增强交互感。
```css
<style scoped>
.
anchor-container {
display: flex;
}
.content-area {
margin-left: 20px;
padding-top: 50px;
}
h2,
h3 {
cursor: pointer;
}
</style>
```
---
### 总结
以上代码实现了双层嵌套的
锚点跟随滚动效果[^1][^2]。核心在于利用 `window.scrollY` 或者 `document.documentElement.scrollTop` 动态判断哪个
锚点处于可见范围内，并同步更新导航
菜单的选择状态。
扫一扫
1878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
