vue滚动导航菜单_伟笑的博客-程序员宅基地_vue 滚动导航

技术标签: Vue2  


<template>
  <div class="wrap">
    <div class="result" @scroll="onScroll">
      <div class="scroll-item"><span>第一</span></div>
      <div class="scroll-item"><span>第二</span></div>
      <div class="scroll-item"><span>第三</span></div>
      <div class="scroll-item"><span>第四</span></div>
    </div>

    <div class="list" ref="header" :class="headerFixed ? 'issFixed' : ''">
      <div v-for="(item, index) in title_list" :key="index">
        <span
          ref="spans"
          :style="{ color: activeStep === index ? '#1987e1' : '#000000' }"
          @click="jump(index)"
        >
          {
    {
     item.title }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      activeStep: 0,
      title_list: [
        {
     title: '第一' },
        {
     title: '第二' },
        {
     title: '第三' },
        {
     title: '第四' },

      ],
      // 目录固定吸顶
      offsetTop: 0,
      offsetHeight: 0,
      headerFixed: 0
    }
  },
  methods: {
    
    // 点击事件
    jump(index) {
    
      var items = document.querySelectorAll(".scroll-item");
      for (var i = 0; i < items.length; i++) {
    
        if (index === i) {
    
          items[i].scrollIntoView({
    
            block: "start",//默认跳转到顶部
            behavior: "smooth"//滚动的速度
          });
        }
      }
    },
    // 滚动行为
    onScroll(e) {
    
      let scrollItems = document.querySelectorAll(".scroll-item");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
    
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
    
          this.activeStep = i;
          break;
        }
      }
    },

    handleScroll() {
    
      // 得到页面滚动的距离,兼容写法
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 判断页面滚动的距离是否大于吸顶元素的位置
      this.headerFixed = scrollTop > this.offsetTop - this.offsetHeight;
    }
  },

  mounted() {
    
    this.$nextTick(() => {
    
      // 获取吸顶元素的dom
      let header = this.$refs.header;
      // 吸顶元素到top的距离
      this.offsetTop = header.offsetTop;
      // 元素自身的高度
      this.offsetHeight = header.offsetHeight;

      // 监听滚动条
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  destroyed() {
    
    window.removeEventListener('scroll', this.handleScroll);
  },
}
</script>

<style scoped>
.wrap {
    
  display: flex;
  justify-content: space-around;
}
.issFixed {
    
  position: fixed;
  top: 0px;
  /* left: 0px; */
  right: 0px;
  z-index: 4;
}
.list {
    
  width: 60px;
  line-height: 60px;
  background: pink;
}

.result {
    
  width: 100%;
  height: 500px;
  overflow: scroll;
}
.scroll-item {
    
  width: 100%;
  height: 500px;
  margin-top: 20px;
  background: yellow;
}
.scroll-item > span {
    
  font-size: 40px;
}
.scroll-item:first-child {
    
  margin-top: 0;
}
.scroll-item:last-child {
    
  height: 500px;
}
/* 最后一个元素的最小高度要大于等于父元素的高度,如果scroll-item为高度自适应的话,那么最后一个scroll-item就得设置min-height:100% */
</style>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43045869/article/details/115447308

智能推荐

mvc路由原理 php_PHP MVC原理及实现_瞭望智库的博客-程序员宅基地

一、mvc原理mvc是一种程序开发设计模式,它实现了显示模块与功能模块的分离。提高了程序的可维护性、可移植性、可扩展性与可重用性,降低了程序的开发难度。它主要分模型、视图、控制器三层。模型(model)它是应用程序的主体部分,主要包括业务逻辑模块(web项目中的Action,dao类)和数据模块(pojo类)。模型 与数据格式无关,这样一个模型能为多个视图提供数据。由于应用于模型的代码只需写一次就...

linux sock_raw原始套接字编程 (转!精!)_zhb123168的博客-程序员宅基地

<br />sock_raw原始套接字编程可以接收到本机网卡上的数据帧或者数据包,对与监听网络的流量和分析是很有作用的.一共可以有3种方式创建这种 socket1.socket(AF_INET, SOCK_RAW, IPPROTO_TCP|IPPROTO_UDP|IPPROTO_ICMP)发送接收ip数据包2.socket(PF_PACKET, SOCK_RAW, htons(ETH_P_IP|ETH_P_ARP|ETH_P_ALL))发送接收以太网数据帧3.socket(AF_INET, SO

cors_深入了解CORS_dingshi7798的博客-程序员宅基地

cors 这篇文章由Panayiotis«pvgr»Velisarakos进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态! CORS是HTML5随附的一个相对较新的API,它使我们的网站可以请求外部和以前受限制的资源。 它使我们能够请求不同于父页面的域上的资源,从而放宽了传统的同源策略 。 例如,在CORS跨域之前,不可能进行Ajax请求(从ex...

socket发展史_xunzhaoxusanduo的博客-程序员宅基地_socket历史

1.Soket发展史以及它和tcp/ip的关系七十年代中,美国国防部高研署(DARPA)将TCP/IP的软件提供给加利福尼亚大学Berkeley分校后,TCP/IP很快被集成到Unix中,同时出现了许多成熟的TCP/IP应用程序接口(API)。这个API称为Socket接口。今天,SOCKET接口是TCP/IP网络最为 通用的API,也是在INTERNET上进行应用开发最为通用的API。

java static关键字的使用_想拥有海绵宝宝的微笑的博客-程序员宅基地

static关键字    通常来说,创建类的时候,是用new创建此类的对象才可以获得,执行new创建对象时数据存储空间才被分配,其方法才被外界调用    有两种情况用new无法解决:        1)只为某特定域分配单一存储空间,不管创建多少对象        2)希望某个方法不与包含她的类的任何对象实例关联在一起            static初始化:

SV processses_weixin_34117211的博客-程序员宅基地

SV中的structured procedure:    1)intial procedure,keyword只有initial;最开始被调用一次;    2)always procedure,keyword包括always,always_comb,always_latch,always_ff;        整个仿真时间一直被调用;    3)final procedure,keywor...

随便推点

Qt中plugin cannot be loaded for module ” “的解决办法_Richard的苹果的博客-程序员宅基地

Qt中plugin cannot be loaded for module ” “的解决办法plugin cannot be loaded for module “QtQuick.XmlListModel”: ???D:\qt5.9\5.9\mingw53_32\qml\QtQuick\XmlListModel\qmlxmllistmodelplugind.dll???C:\Users\user\Desktop\new\build-General-Desktop_Qt_5_9_0_MinGW_32

5分钟了解Java 12 八大新特性_高可用架构的博客-程序员宅基地

导读:Java 12 终于发布了,我们一起来看一看 Java 12 中的新特性。通过本文可以在5分钟内快速了解 Java 12 新特性。1 Switch 表达式使用Jav...

mysql 性能优化(七)锁机制_CodingAnHour的博客-程序员宅基地_mysql锁优化

解决因资源共享,而造成的并发问题。例如:例如:电商A,B两人同时购买最后一件商品A:仅快0.0001秒抢到的-&gt;加锁-&gt;处理业务逻辑-&gt;释放锁B:在B获取到商品时,商品已加锁,等待所释放,商品状态已发生改变,已售空。分类:操作类型:读锁(共享锁):对同一个数据,可以同时进行多个读操作,互不干扰写锁(互斥锁): 如果当前写操作没有完成(未释放锁),则无法进行其他的读操作和写操作操作范围:行锁表锁页锁...

Linux 下 卸载 Julia 旧版本 & 更新到 1.5_Mr_Vague的博客-程序员宅基地_julia 卸载包

julia版本迭代很快,卸载旧版本,更新到最新版本是很方便的。卸载 julia 其实就是删除安装目录和包目录a. 通常在安装的时候是用软连接把安装路径的执行文件与系统执行文件目录关联起来,使用以下命令找到真正的安装目录,并删除[root]# which julia/usr/local/bin/julia[root]# ll /usr/local/bin/julialrwxrwxrwx 1 root root 27 Oct 8 17:15 /usr/local/bin/julia -&gt

sunjiali_weixin_33816611的博客-程序员宅基地

# coding: utf-8import tkinter as tkfrom ttk import Buttonclass Main(tk.Tk): def __init__(self): tk.Tk.__init__(self) self.geometry(self.getSize()) tk.Label(self, he...

replace函数用法python_python函数深入浅出 9.replace()函数详解_weixin_39805720的博客-程序员宅基地

1.函数名及其来源replace() 函数命名来源于英文单词replace(替换)。用于替换字符串中的特定字符replace 函数的例子:&gt;&gt;&gt;string = 'abc is very easy.'&gt;&gt;&gt;string.replace('easy','hard')'abc is very hard.'2.函数定义源码及其用法拆解str.replace(old, ...