vue 电梯导航制作（鼠标滚动控制导航栏的显示与隐藏）

最新推荐文章于 2024-05-07 14:11:04 发布

啊翔呀

最新推荐文章于 2024-05-07 14:11:04 发布

阅读量2.9k

点赞数 2

文章标签：前端 css3 vue.js html5

本文链接：https://blog.csdn.net/m0_64409387/article/details/123322764

版权

本文介绍如何使用Vue.js和CSS3实现鼠标滚动控制导航栏的显示与隐藏效果。通过监听滚动事件，根据滚动距离动态切换导航栏和返回箭头，提供平滑的用户体验。

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

鼠标滚动控制导航栏的显示与隐藏

上图先看效果：
下面为2张图，默认为导航栏，当鼠标向下滚动一定距离时，变为箭头，
并且点击黄色的返回图标，也变为下方箭头，此时再滚动窗口，不会变为导航栏。
点击下方箭头，变为导航栏。
可以用鼠标滚动变化，也可以点击变化。
在这里插入图片描述 1111

实现思路：

首先引入想要的导航栏图标，调整大小，固定在右侧
引入下方箭头，并固定在右侧，并先隐藏
运用滚动scroll方法，并监听滚动的变化值
用if判断变化值来控制显示与隐藏

上代码（注释）：

<template>
	<div>
		<!-- 导航栏  默认设置为显示 -->
		<!-- 引入需要的图片 -->
		<div class="nav_imgs" v-show="navs_img">
			<div id="">
				<img src="https://s1.ax1x.com/2022/03/07/brOzsx.png">
			</div>
			<div id="">
				<img src="https://s1.ax1x.com/2022/03/07/brXZQI.png">
			</div>
			<div id="">
				<img src="https://s1.ax1x.com/2022/03/07/brXmOP.png">
			</div>
			<div id="">
				<img src="https://s1.ax1x.com/2022/03/07/brXKw8.png">
			</div>
			<