快捷導(dǎo)航

vue使用原生js實現(xiàn)滾動頁面跟蹤導(dǎo)航高亮的示例代碼

更新時間：2018年10月25日 11:23:24 作者：小恐龍

這篇文章主要介紹了vue使用原生js實現(xiàn)滾動頁面跟蹤導(dǎo)航高亮的示例代碼，滾動頁面指定區(qū)域?qū)Ш礁吡?。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

需要使用vue做一個專題頁面。滾動頁面指定區(qū)域?qū)Ш礁吡痢?br />

監(jiān)聽滾動頁面事件，對比當(dāng)前頁面的位置與元素的位置，如果當(dāng)前滾動的區(qū)域位置大于元素的位置，導(dǎo)航添加class，其他去掉class進行樣式切換。

我使用的方法是在定位元素上添加id，在導(dǎo)航添加data-id屬性，監(jiān)聽滾動事件，如果當(dāng)前滾動區(qū)域大于定位元素區(qū)域，將元素的id賦值給變量，然后與導(dǎo)航的data-id進行匹配，切換class。

html結(jié)構(gòu)

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" :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() {
   window.addEventListener('scroll', function() {
    // 封裝類名函數(shù)集：判斷、移除、增加、獲?。ê唵未直┌妫?；
    function removeClass(obj, cls) {
     if (obj.className == cls) {
      obj.className = "";
     }
    }
    function addClass(obj, cls) {
     if (obj.className != cls) {
      obj.className = cls;
     }
    }

    let pos = document.documentElement.scrollTop;
    if (pos > 300) {
     document.querySelector('.nav-container').style.display = 'block';
    } else {
     document.querySelector('.nav-container').style.display = 'none';
    }
    var menus = document.getElementById("js-nav").getElementsByTagName("li");
    var items = document.getElementById("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;
     }
    }
    if (currentId) {
     for (var j = 0; j < menus.length; j++) {
      var _menu = menus[j];
      // href屬性獲取的是整個link，需以#為界截除獲取最后一個元素；
      var _href = _menu.getAttribute('data-id');
      if (_href != currentId) {
       removeClass(_menu, "cur");
      } else {
       addClass(_menu, "cur");
      }
     }
    }
   })
  }
 }
};

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: