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">
        &lt;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>

原文地址：https://segmentfault.com/a/1190000016798454