vue使用原生js实现滚动页面跟踪导航高亮
- 需要使用vue做一个专题页面。
- 滚动页面指定区域导航高亮。
- BetterScroll：可能是目前最好用的移动端滚动插件
- 如何自定义CSS滚动条的样式？
监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。我使用的方法是在定位元素上添加id，在导航添加
html结构
main.vue
<template>
<div class="qz-home">
<div class="quiz-container">
<div class="quiz-ad-pic" id="pagetop"></div>
<div class="quiz-main">
<div class="quiz-main-inside" id="js-content">
<quiz-sessions class="item" id="quizhall"></quiz-sessions>
<quizRecords class="item" id="quizrecord"></quizRecords>
<quiz-history class="item" id="quizHistory"></quiz-history>
<quiz-mine class="item" id="quizMine"></quiz-mine>
<quiz-rank class="item" id="quizRank"></quiz-rank>
<quiz-rule class="item" id="quizRule"></quiz-rule>
</div>
</div>
<navigation id="js-nav"></navigation>
</div>
</div>
</template>
navigation.vue
<template>
<nav class="nav-container">
<div class="nav-mark"></div>
<div class="nav-main">
<ul class="nav-list">
<li :class="{'cur': curindex === index}" v-for="(item, index) in navList" :key="index" :javascript</p>
export default {
name: "Navigation",
data() {
return {
navList: [
{ name: "竞猜大厅", id: "quizhall" },
{ name: "竞猜记录", id: "quizrecord" },
{ name: "历史赛事", id: "quizHistory" },
{ name: "我的竞猜", id: "quizMine" },
{ name: "排行榜", id: "quizRank" },
{ name: "玩法", id: "quizRule" }
],
curindex: 0
};
},
mounted() {
this.initScroll();
},
methods: {
initScroll() {
let _this = this;
// 监听页面滚动事件
window.addEventListener('scroll', function() {
var removeClass = function(obj, cls) {
if (obj.className == cls) {
obj.className = "";
}
}
var addClass = function(obj, cls) {
if (obj.className != cls) {
obj.className = cls;
}
}
let pos = document.documentElement.scrollTop;
if (pos > 300) {
_this.isVisibleNav = true;
} else {
_this.isVisibleNav = false;
}
// 获取全部导航dom与元素dom
var navList = document.querySelector("#js-nav").querySelectorAll("li");
var items = document.querySelector("#js-content").querySelectorAll(".item");
// 滚动后遍历元素，如果页面滚动位置大于元素的位置，赋值给变量
var currentId = "";
for (var i = 0; i < items.length; i++) {
var _item = items[i];
var _itemTop = _item.offsetTop;
if (pos > _itemTop - 200) {
currentId = _item.id;
} else {
break;
}
}
// 如果已赋值了变量，进行匹配，如果匹配则添加class其他删除
if (currentId) {
for (var j = 0; j < navList.length; j++) {
var _navItem = navList[j];
var _navId = _navItem.getAttribute('<a href="https://www.zybuluo.com/EncyKe/note/257932#js%E5%AF%BC%E8%88%AA%E6%9D%A1%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E7%9B%91%E8%A7%86" rel="nofollow noreferrer">参考的文章地址</a></p>
