zoukankan      html  css  js  c++  java
  • vue使用原生js实现滚动页面跟踪导航高亮

    监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加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 &gt; 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 &lt; items.length; i++) {
          var _item = items[i];
          var _itemTop = _item.offsetTop;
          if (pos &gt; _itemTop - 200) {
            currentId = _item.id;
          } else {
            break;
          }
        }
        // 如果已赋值了变量,进行匹配,如果匹配则添加class其他删除
        if (currentId) {
          for (var j = 0; j &lt; 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

  • 相关阅读:
    centos7.6 安装与配置 MongoDB yum方式
    MongoDB 介绍
    centos 关闭selinux
    前端 HTML标签属性
    前端 HTML 标签嵌套规则
    前端 HTML 标签分类
    前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍
    前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类
    前端 HTML form表单标签 select标签 option 下拉框
    POJ 1426
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9900966.html
Copyright © 2011-2022 走看看