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

转载于:https://www.cnblogs.com/lalalagq/p/9900966.html