vue使用原生js實(shí)現(xiàn)滾動(dòng)頁(yè)面跟蹤導(dǎo)航高亮

YanceyOfficial 發(fā)布于2019-08-23 12:32 / 925人閱讀

摘要：需要使用做一個(gè)專(zhuān)題頁(yè)面。滾動(dòng)頁(yè)面指定區(qū)域?qū)Ш礁吡?。監(jiān)聽(tīng)滾動(dòng)頁(yè)面事件，對(duì)比當(dāng)前頁(yè)面的位置與元素的位置，如果當(dāng)前滾動(dòng)的區(qū)域位置大于元素的位置，導(dǎo)航添加，其他去掉進(jìn)行樣式切換。

需要使用vue做一個(gè)專(zhuān)題頁(yè)面。

滾動(dòng)頁(yè)面指定區(qū)域?qū)Ш礁吡痢?/p>

監(jiān)聽(tīng)滾動(dòng)頁(yè)面事件，對(duì)比當(dāng)前頁(yè)面的位置與元素的位置，如果當(dāng)前滾動(dòng)的區(qū)域位置大于元素的位置，導(dǎo)航添加class，其他去掉class進(jìn)行樣式切換。        我使用的方法是在定位元素上添加id，在導(dǎo)航添加data-id屬性，監(jiān)聽(tīng)滾動(dòng)事件，如果當(dāng)前滾動(dòng)區(qū)域大于定位元素區(qū)域，將元素的id賦值給變量，然后與導(dǎo)航的data-id進(jìn)行匹配，切換class。

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

main.vue

navigation.vue

javascript

export default {
  name: "Navigation",
  data() {
    return {
      navList: [
        { name: "競(jìng)猜大廳", id: "quizhall" },
        { name: "競(jìng)猜記錄", id: "quizrecord" },
        { name: "歷史賽事", id: "quizHistory" },
        { name: "我的競(jìng)猜", id: "quizMine" },
        { name: "排行榜", id: "quizRank" },
        { name: "玩法", id: "quizRule" }
      ],
      curindex: 0
    };
  },
  mounted() {
    this.initScroll();
  },
  methods: {
    initScroll() {
      let _this = this;
      // 監(jiān)聽(tīng)頁(yè)面滾動(dòng)事件
      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;
        }
        // 獲取全部導(dǎo)航dom與元素dom
        var navList = document.querySelector("#js-nav").querySelectorAll("li");
        var items = document.querySelector("#js-content").querySelectorAll(".item");
        // 滾動(dòng)后遍歷元素，如果頁(yè)面滾動(dòng)位置大于元素的位置，賦值給變量
        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;
          }
        }
        // 如果已賦值了變量，進(jìn)行匹配，如果匹配則添加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");
            }
          }
        }
      })
    }
  }
};

參考的文章地址

GPU云服務(wù)器云服務(wù)器 vue里寫(xiě)原生js 原生js滾輪滾動(dòng) js 上下滾動(dòng)導(dǎo)航 js滾動(dòng)導(dǎo)航菜單

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/98688.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

YanceyOfficial

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Datawhale刷題LeetCode

閱讀 1178·2021-11-16 11:45
C語(yǔ)言：深度刨析數(shù)據(jù)在內(nèi)存中的存儲(chǔ)——浮點(diǎn)型數(shù)據(jù)

閱讀 3190·2021-10-13 09:40
JavaScript 轉(zhuǎn)換數(shù)字為整數(shù)的方法

閱讀 790·2019-08-26 13:45
我為 VS Code 開(kāi)發(fā)了一個(gè) Deno 插件

閱讀 1274·2019-08-26 13:32
JSON 格式

閱讀 2238·2019-08-26 13:23
Generator：JS執(zhí)行權(quán)的真實(shí)操作者

閱讀 984·2019-08-26 12:16
正則基礎(chǔ)詳解

閱讀 2876·2019-08-26 11:37
前端面試每日3+1——第109天

閱讀 1809·2019-08-26 10:32

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue使用原生js實(shí)現(xiàn)滾動(dòng)頁(yè)面跟蹤導(dǎo)航高亮

相關(guān)文章