Vue uses native js to implement scrolling page tracking navigation highlighting example code

You need to use vue to make a special page. Scroll the page to specify the area navigation highlight.

Listen to the scrolling page event, compare the position of the current page with the position of the element. If the current scrolling area position is greater than the position of the element, add class to the navigation, remove the class for style switching.

The method I use is to add an id on the positioning element, add a data-id attribute in the navigation, listen for a scroll event, if the current scrolling area is larger than the positioning element area, assign the id of the element to the variable, and then match the data-id of the navigation, and switch class.

html structure

<template>
 <div class="qz-home">
  <div class="quiz-container">
   <div class="quiz-ad-pic" ></div>
   <div class="quiz-main">
    <div class="quiz-main-inside" >
     <quiz-sessions class="item" ></quiz-sessions>
     <quizRecords class="item" ></quizRecords>
     <quiz-history class="item" ></quiz-history>
     <quiz-mine class="item" ></quiz-mine>
     <quiz-rank class="item" ></quiz-rank>
     <quiz-rule class="item" ></quiz-rule>
    </div>
   </div>
   <navigation ></navigation>
  </div>
 </div>
</template>

<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" :data-id=""><a @click="linkTo(, index)">{{}}</a></li>
   </ul>
   <div class="backtop" @click="backTop()">
    <a></a>
   </div>
  </div>
 </nav>
</template>

javascript

export default {
 name: "Navigation",
 data() {
  return {
   navList: [
    { name: "Guess Hall", id: "quizhall" },
    { name: "Guess Record", id: "quizrecord" },
    { name: "Historical Events", id: "quizHistory" },
    { name: "My guess", id: "quizMine" },
    { name: "Ranking List", id: "quizRank" },
    { name: "How to play", id: "quizRule" }
   ],
   curindex: 0
  };
 },
 mounted() {
  ();
 },
 methods: {
  initScroll() {
   ('scroll', function() {
    // Encapsulate the function set of class name: judge, remove, add, and obtain (simple and rough version);    function removeClass(obj, cls) {
     if ( == cls) {
       = "";
     }
    }
    function addClass(obj, cls) {
     if ( != cls) {
       = cls;
     }
    }

    let pos = ;
    if (pos &gt; 300) {
     ('.nav-container'). = 'block';
    } else {
     ('.nav-container'). = 'none';
    }
    var menus = ("js-nav").getElementsByTagName("li");
    var items = ("js-content").querySelectorAll(".item");
    var currentId = "";
    
    for (var i = 0; i &lt; ; i++) {
     var _item = items[i];
     var _itemTop = _item.offsetTop;
     if (pos &gt; _itemTop - 200) {
      currentId = _item.id;
     } else {
      break;
     }
    }
    if (currentId) {
     for (var j = 0; j &lt; ; j++) {
      var _menu = menus[j];
      // The href attribute gets the entire link, and needs to be used as # Get the last element by intercepting it; var _href = _menu.getAttribute('data-id');      if (_href != currentId) {
       removeClass(_menu, "cur");
      } else {
       addClass(_menu, "cur");
      }
     }
    }
   })
  }
 }
};

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.