vue实现导航tab吸顶 & 点击锚点动画跳转 & 监听滚动

最新推荐文章于 2024-08-13 16:27:02 发布

Enidchan_

最新推荐文章于 2024-08-13 16:27:02 发布

阅读量1.8k

点赞数

分类专栏：知识点

本文链接：https://blog.csdn.net/EnidChann/article/details/106784226

版权

本文介绍如何在Vue项目中实现导航栏在滚动时吸顶效果，并详细讲解点击锚点时的平滑动画跳转功能，同时提供相关页面代码和CSS实现细节。

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

示例图
在这里插入图片描述

页面代码

	// 导航tab部分, 利用isFixed实现吸顶
	<div class="floor bgW"
	         ref="floorFixed"
	         :class="{'isFixed': isFixed}">
	      <header v-for="(item,index) in navList"
	              @click="clickToFloor(index)"
	              :class="{'activeNav':activeIndex===index}"
	              :key="index">{
   {
   item}}
	      </header>
	</div>
	
	// 内容区域(4个板块)
	<div class="listshow0">
	<div class="listshow1">
	<div class="listshow2">
	<div class="listshow3">