vue uses native js to implement scrolling page tracking and navigation highlighting

The content of this article is about Vue using native js to implement scrolling page tracking and navigation highlighting. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

You need to use vue to make a special page.

Scroll the page and highlight the navigation in the specified area.

Listen to scrolling page events, 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 a class to the navigation, otherwise remove the class for style switching.

The method I use is to add the id to the positioning element, add the data-id attribute to the navigation, listen for the scroll event, and if the current scroll area is larger than the positioning element area, assign the element's id to the variable, and then combine it with the navigation's data- Match the id and switch the class.

html structure

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="{&#39;cur&#39;: curindex === index}" v-for="(item, index) in navList" :key="index" :data-id="item.id"><a @click="linkTo(item.id, index)">{{item.name}}</a></li>
      </ul>
      <div class="backtop" @click="backTop()">
        <a></a>
      </div>
    </div>
  </nav>
</template>

javascript

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('data-id');
            if (_navId != currentId) {
              removeClass(_navItem, "cur");
            } else {
              addClass(_navItem, "cur");
            }
          }
        }
      })
    }
  }
};

The above is the detailed content of vue uses native js to implement scrolling page tracking and navigation highlighting. For more information, please follow other related articles on the PHP Chinese website!