js+vue,前端关于页面滚动让头部菜单淡入淡出实现原理

今天遇到个需求:我这里借用小米商城的详情页做个比喻吧。

刚开始其商品详情页是这样的:

当滚动到一定高度时,是这样的:

可以看到当滚动到轮播图底下的时候,详情页的菜单完全显现出来。

以下上代码:

HTML:

<div class="detail-header"><div class="left operate" :style="{'background-color':iconStyle.BackgroundColor,'color':iconStyle.color}"><span class="iconfont icon-fanhui"></span></div><div class="active-box" :style="{'opacity':Opacity}"><div>商品</div><div>评价</div><div>评价</div><div>详情</div><div>推荐</div></div><div class="right operate" :style="{'background-color':iconStyle.BackgroundColor,'color':iconStyle.color}"><span class="iconfont icon-home"></span></div><div class="header-bg" :style="{'opacity':Opacity}"></div></div>

css:

.detail-header{position: absolute;left: 0;right: 0;height: 1.173333rem;z-index: 999;.active-box{position: absolute;left: 50%;transform: translateX(-50%);white-space: nowrap;display: flex;align-items: center;justify-content: center;line-height: 1.173333rem;font-size: 0.426667rem;opacity:0;z-index:67;>div{padding: 0 0.4rem;}}.operate{position: absolute;width: 0.906667rem;height: 0.906667rem;line-height: 0.906667rem;border-radius: 50%;background-color: rgba(0,0,0,.3);color: #fff;text-align: center;margin: 0.133333rem;display: table;z-index: 58;.iconfont{display: table-cell;font-size: 0.4rem;vertical-align: middle;}}.left{left:0;}.right{right: 0;}.header-bg{background-color: #fff;height: 100%;opacity: 0;z-index: 66;}}

js:

data(){return{Opacity:0,iconStyle:{BackgroundColor:'rgba(0, 0, 0, 0.3)',color:'#fff'}}},
ContentScroll(e){let top = (e.target.scrollTop / 120);this.Opacity = top >= 1?1:top;console.log(top)if(top >= 1){this.iconStyle.BackgroundColor = 'unset'this.iconStyle.color = '#333'}else{this.iconStyle.BackgroundColor = 'rgba(0, 0, 0, 0.3)'this.iconStyle.color = '#fff'}}

在上面代码中可以看出,头部代码是绝对定位的,头部不要设置背景图,因为我么是通过设置opacity来控制元素的显示隐藏的,所以我们用元素来代替背景的作用。只要设置好图层z-index就不会发生:操作菜单和按钮被遮挡的情况。记住要设置定位哦!

这里的e.target.scrollTop / 120 ;120是你轮播图的高度,根据自己的情况而定。

注意:这里主要是记录实现原理,js代码没那么完整,大家复制的时候注意。还有就是做的没小米商城那么丝滑,大家可以自行优化以下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/120409.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据组件-Flink环境搭建

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 个人主页&#xff1a;beixi 本文章收录于专栏&#xff08;点击传送&#xff09;&#xff1a;【大数据学习】 &#x1f493;&#x1f493;持续更新中&#xff0c;感谢各位前辈朋友们支持…

电脑硬盘数据恢复一般需要收费多少钱

随着电子信息时代的发展&#xff0c;个人和企业对电脑硬盘中存储的数据越发重视。然而&#xff0c;由于各种原因&#xff0c;硬盘数据丢失的情况屡见不鲜。如果您正陷入这样的困境&#xff0c;您可能会好奇恢复失去的数据需要花费多少钱。本文将为您介绍电脑硬盘数据恢复的一般…

【内网穿透】使用Nodejs搭建简单的HTTP服务器 ,并实现公网远程访问

目录 前言 1.安装Node.js环境 2.创建node.js服务 3. 访问node.js 服务 4.内网穿透 4.1 安装配置cpolar内网穿透 4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation…

hadoop3.3.1单机版环境搭建详细流程记录

1、在centos7中创建必要的目录&#xff1b; 2、上传JDK安装包到tools目录&#xff1b; 3、解压JDK到/opt/server/目录&#xff1b; tar -zxvf jdk-8u221-linux-x64.tar.gz -C /opt/server/ 4、“vim&#xff1a;未找到命令”的解决办法&#xff1b; 安装vim即可&#xff1b; …

Vue-router路由

配置路由 相当于SpringMVC的Controller 路径然后&#xff0c;跳转到对应的组件 一键生成前端项目文档

手写Mybatis:第7章-SQL执行器的定义和实现

文章目录 一、目标&#xff1a;SQL执行的定义和实现二、设计&#xff1a;SQL执行的定义和实现三、实现&#xff1a;SQL执行的定义和实现3.1 工程结构3.2 SQL执行实现的关系图3.3 执行器的定义和实现3.3.1 Executor 接口3.3.2 BaseExecutor 抽象基类3.3.3 SimpleExecutor 简单执…

机器学习---预剪枝、后剪枝(REP、CCP、PEP、)

1. 为什么要进行剪枝 横轴表示在决策树创建过程中树的结点总数&#xff0c;纵轴表示决策树的预测精度。 实线显示的是决策树 在训练集上的精度&#xff0c;虚线显示的则是在⼀个独⽴的测试集上测量出来的精度。 随着树的增⻓&#xff0c;在 训练样集上的精度是单调上升的&…

【前端demo】动态赋值CSS

文章目录 效果过程html实现oninput与onchange事件统一配置CSS 代码HTMLCSSJS 其他demo 效果 动态显示CSS样式&#xff0c;由:root统一配置。 效果预览&#xff1a;https://codepen.io/karshey/pen/BavLrwy 参考&#xff1a; Dynamic CSS Variables(codepen.io) 漫谈document…

Vue 2 nextTick方法|异步更新|事件循环

1 nextTick的用处 vm.$netTick的作用是将回调延迟到下次DOM更新周期之后执行。 它接受一个回调函数作为参数。 其实&#xff0c;在我们更新数据状态后&#xff0c;是不会立马渲染的&#xff0c;你不能即刻获取到新的DOM&#xff1a; <!DOCTYPE html> <html><…

NPM 常用命令(三)

目录 1、npm compltion 1.1 描述 2、npm config 2.1 常用命令 2.2 描述 set get list delete edit fix 2.3 配置 json global editor location long 3、npm dedupe 3.1 描述 3.2 配置 4、npm deprecate 4.1 命令使用 4.2 描述 4.3 配置 registry ot…

CentOS7 Hadoop3.3.0 安装与配置

一、安装JDK 1、创建文件夹tools和training用于存放压缩包和解压使用&#xff0c;tools存放压缩包&#xff0c;training用于解压后安装jdk和hadoop的路径。 1&#xff09;回到路径为 / 的位置 cd /2) 创建 tools 和 training mkdir toolsmkdir training3) 进入tools文件夹 …

RHCA之路---EX280(4)

RHCA之路—EX280(4) 1. 题目 Use the S2I functionality of your OpenShift instance to build an application in the rome project Use the Git repository at http://services.lab.example.com/php-helloworld for the application source Use the Docker image labeled re…

Three.js开发中遇到的常见问题总结和性能优化

关于Three.js开发中遇到的一些问题总结 1.加载外部模型文件无法在场景中显示: (1) 确保当前文件内容是否能被读取&#xff0c;在Javascript的console中查找错误&#xff0c;并确定当你调用.load()的时候&#xff0c;使用了onError回调函数来输出结果, 如果err 输出则表示当前…

一加11/Ace2/10Pro手机如何实现全局120HZ高刷-游戏超级流畅效果

已经成功root啦。安卓13目前也一样支持LSPosed框架&#xff0c;如果你对LSP框架有需求&#xff0c;也可以使 自测120HZ刷新率诞生以后&#xff0c;很多小伙伴用上了就很难回来啦&#xff0c;一加11/Ace2/10Pro/9pro手 机厂商也对新机做了很多的适配&#xff0c;让我们日常使用起…

工业4G路由器的户外组网与无人值守场景应用

工业4G路由器是专为不便电缆布线的工业或日晒雨淋网络不畅的户外环境所设计的网络设备。它能够在没有光纤宽带的情况下使用插卡的方式提供4G或无线WiFi的网络支持。具备工业级防水功能&#xff0c;能够在户外环境下进行网络部署&#xff0c;并实现无人值守运行。工业4G路由器还…

SpringMVC使用

文章目录 一.MVC基础概念1.MVC定义2.SpringMVC和MVC的关系 二.SpringMVC的使用1.RequestMapping2.获取参数1.获取单个参数2.传递对象3.后端参数重命名&#xff08;后端参数映射&#xff09;4.获取URL中参数PathVariable5.上传文件RequestPart6.获取Cookie/Session/header 3.返回…

聚焦!智慧燃气使用体验到底怎么样?

文章来源&#xff1a;网络 关键词&#xff1a;智慧燃气、智能管网、智能气网、智慧燃气系统、智慧燃气平台 随着科技的发展&#xff0c;物联网技术不断进步&#xff0c;智能燃气也时常出现在我们的生活中。但大多数人仍然对智慧燃气知之甚少。究竟何为智慧燃气&#xff1f;能…

如何将Word转成PDF?试一下这个转换方法

Word转成PDF是现代办公中常见的需求&#xff0c;它可以确保文件的格式和内容在不同平台上保持一致&#xff0c;并且更加方便共享和打印。在这个数字化时代&#xff0c;我们经常需要将Word文档转换为PDF格式&#xff0c;无论是个人用户还是商务用户都会遇到这样的需求。那么如何…

IP地址、网关、网络/主机号、子网掩码关系

一、IP地址 IP地址组成 IP地址分为两个部分&#xff1a;网络号和主机号 &#xff08;1&#xff09;网络号:标识网段&#xff0c;保证相互连接的两个网段具有不同的标识。 &#xff08;2&#xff09;主机号:标识主机&#xff0c;同一网段内&#xff0c;主机之间具有相同的网…

介绍几个搜索引擎

Google&#xff1a;全球最大的搜索引擎&#xff0c;提供全面的搜索服务&#xff0c;包括网页、图片、视频、新闻、地图等。 Baidu&#xff1a;中国最大的搜索引擎&#xff0c;提供类似于Google的全面搜索服务&#xff0c;同时也有网盘、知道等功能。 Bing&#xff1a;微软公司…