이 기사의 내용은 네이티브 js를 사용하여 스크롤링 페이지 추적 및 탐색 강조 표시를 구현하는 것에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
특별한 페이지를 만들려면 vue를 사용해야 합니다.
스크롤 페이지의 지정된 영역에서 탐색을 강조 표시합니다.
스크롤 페이지 이벤트를 듣고 현재 페이지의 위치와 요소의 위치를 비교합니다. 현재 스크롤 영역의 위치가 요소의 위치보다 큰 경우 탐색에 클래스를 추가하고 클래스를 제거합니다. 다른 스타일은 스타일을 전환합니다.제가 사용하는 방법은 위치 지정 요소에 ID를 추가하고, 탐색에 data-id 속성을 추가하고, 스크롤 이벤트를 수신하고, 현재 스크롤 영역이 위치 지정 요소 영역보다 크면 해당 요소의 ID를 변수를 탐색의 데이터 ID 일치, 스위치 클래스와 비교합니다.
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() { 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"); } } } }) } } };
위 내용은 vue는 기본 js를 사용하여 스크롤 페이지 추적 및 탐색 강조 표시를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!