vue使用原生js实现滚动页面跟踪导航高亮的示例代码

最新推荐文章于 2023-11-27 17:56:08 发布

霜如明月

最新推荐文章于 2023-11-27 17:56:08 发布

阅读量975

点赞数

分类专栏： vue JavaScript 文章标签： vue 原生js

本文链接：https://blog.csdn.net/q3254421/article/details/88562289

版权

本文介绍如何在Vue项目中利用原生JavaScript实现滚动页面时导航条的高亮效果。通过监听滚动事件，比较当前滚动位置与元素位置，动态添加和移除class以实现导航项的样式切换。具体实现包括在定位元素上设置id，导航链接添加data-id属性，并通过JavaScript进行匹配处理。

摘要由CSDN通过智能技术生成

使用vue做一个专题页面。滚动页面指定区域导航高亮。
监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。
我使用的方法是在定位元素上添加id，在导航添加data-id属性，监听滚动事件，如果当前滚动区域大于定位元素区域，将元素的id赋值给变量，然后与导航的data-id进行匹配，切换class。
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="quizM