CSS+js:顶部导航栏背景滚动渐变、顶部背景滚动渐变

news2024/12/23 22:40:39

一、效果图

在这里插入图片描述
图1

在这里插入图片描述
图2

在这里插入图片描述
图3

二、gradual.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>顶部导航栏渐变和顶部背景渐变</title>
	</head>
	<body>
		<div class="content-root" id="contentRoot" onscroll="handleScroll()">
			<div class="content-top">
				<div class="tool-bar">
					<img class="back-img" src="../images/icon_title_back_black.png" />
					<span class="title">title样式</span>
					<img class="search" src="../images/icon_search.png" />
				</div>
				<div style="position: absolute; margin-top: 60px;">这里可以显示banner图</div>
			</div>
			<div style="height: 800px; background-color: aquamarine; position: relative;"></div>

		</div>
	</body>
	<style type="text/css">
		body {
			position: absolute;
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
			top: 0;
			left: 0;
			bottom: 0;
			background-color #eee;
			/* overflow: auto;
			overflow-y: scroll; */

			/* ::-webkit-scrollbar {
				display: none;
			} */
		}

		.content-root {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			/* 开启 onscroll */
			overflow-y: scroll;
			position: absolute;
			padding-bottom: 2.5rem;
			background-color: #7ddcf8;
		}

		.content-top {
			width: 100%;
			height: 9.375rem;
			/* 如果需要让下面的内容覆盖在这上面,使用  position: absolute; */
			position: relative;
			background-color: #dddddd;
			padding-bottom: 4.125rem;
			align-items: center;
		}


		.tool-bar {
			width: 100%;
			height: 3.125rem;
			display: flex;
			/* 固定位置 */
			position: fixed;
			background-color: transparent;
			padding-left: 1rem;
			padding-bottom: 0.9375rem;
			/* 数值越大,表示越会显示在其他堆叠元素之上 */
			z-index: 999;
			align-items: flex-end;
			justify-content: space-between;
			box-sizing: border-box;
		}
		
		.back-img {
			width: 1.875rem;
			height: 1.25rem;
			margin-left: 0.16rem;
		}

		.title {
			position: absolute;
			font-family: PingFangSC, PingFang SC;
			font-size: 1.25rem;
			left: 50%;
			transform: translate(-50%, 0);
			text-align: center;
		}

		.search {
			position: absolute;
			right: 1rem;
			width: 1.25rem;
			height: 1.25rem;
		}
	</style>
	<script>
		const contentTop = document.querySelector('.content-top')
		const toolBar = document.querySelector('.tool-bar')
		// 注意 div里 让 onscroll 调用handleScroll前提,content-root样式里添加了 overflow-y: scroll;
		function handleScroll() {
			let scrollTop = event.target.scrollTop;
			console.log('handleScroll scrollTop = ', scrollTop);
			 // 设置背景颜色的透明度
			if (scrollTop >= 100) {
				toolBar.style.backgroundColor = "#ffffff";
				 contentTop.style.backgroundColor = "#000000";
			} else if (scrollTop <= 0) {
				toolBar.style.backgroundColor = "transparent";
				contentTop.style.backgroundColor = "#dddddd";
			} else {
				toolBar.style.backgroundColor = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`
				contentTop.style.backgroundColor = `rgba(221,221,221,${scrollTop})`
			}
		}
	</script>
</html>

三、testH5源码

点击查看testh5源码

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux PSCI框架

Linux PSCI框架 概述 参考链接&#xff1a; 简单讲解Linux PSCI框架-Linxu内核栈 概述 PSCI &#xff08;Power State Coordination Interface&#xff09; 是ARM定义的电源管理接口规范&#xff0c;由firm来实现。Linux系统通过smc/hvc指令&#xff08;设备树可查看是那种&a…

5.7软件质量和软件度量

软件质量和软件度量 软件质量软件质量特性ISO/EC9126软件质量模型练习题Mc Call质量模型 软件质量保证软件评审软件容错技术结构冗余信息冗余时间元余冗余附加技术 软件度量练习题 软件质量 软件质量&#xff1a;是指反映软件系统或软件产品满足规定或隐含需求的能力的特征和特…

代码随想录算法训练营day32 | 509. 斐波那契数 、70. 爬楼梯 、746. 使用最小花费爬楼梯

碎碎念&#xff1a;开始动态规划了&#xff01;加油&#xff01; 参考&#xff1a;代码随想录 动态规划理论基础 动态规划常见类型&#xff1a; 动规基础类题目背包问题打家劫舍股票问题子序列问题 解决动态规划问题应该要思考清楚的&#xff1a; 动态规划五部曲&#xff1…

使用 continue 自定义 AI 编程环境

一直在使用github 的 copilot 来编程&#xff0c;确实好用&#xff0c;对编码效率有很大提升。 但是站在公司角度&#xff0c;因为它只能对接公网&#xff08;有代码安全问题&#xff09;。另外&#xff0c;它的扩展能力也不强&#xff0c;无法适配公司特定领域的知识库&#x…

c# winform 创建日志登录界面

一.创建一个用于登录的Login的复合控件 1.右击项目文件&#xff0c;点击添加用户控件&#xff0c;设置为控件名为Login。 2.拉动两个lable控件&#xff0c;两个textBox控件&#xff0c;一个button,一个CheckBox控件。 3.将控件的权限&#xff08;Modifiers&#xff09;设置为Pu…

Unity2D在处理精灵表过程中出现不清晰的解决方法

问题阐述 在我们拿到一张精灵表的时候&#xff0c;我们通常要进行切割。但这样往往导致切割的效果不是很好&#xff0c;这里举一个简单的例子。 这是举例子用到的精灵表 我们先对他进行切割处理。 将single改为Multiope 进入精灵编辑器后&#xff0c;我们选择切割方式 此时我…

【数据结构】链表篇

1.链表的概念以及结构 概念&#xff1a;链表是一种物理储存结构上的非连续、非顺序的储存结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 链式结构在逻辑上是连续的&#xff0c;但是在物理上不一定连续现实中的节点一般都是从堆上申请出来的从堆上申…

中度自闭症儿童上普校还是特校好呢

当家中有中度自闭症儿童时&#xff0c;家长们常常面临一个艰难的抉择&#xff1a;是让孩子进入普通学校&#xff08;普校&#xff09;接受融合教育&#xff0c;还是选择特殊教育学校&#xff08;特校&#xff09;接受更具针对性的教育&#xff1f;这是一个没有标准答案的问题&a…

Python基于逻辑回归的L1正则化(Lasso Logistic Regression)进行分类数据的特征选择项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 可以使用Lasso回归进行特征选择&#xff0c;尽管它本质上是一个用于回归问题的技术&#xff0c;但通过…

Python基于Prophet实现时间序列数据趋势周期特征提取项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 Prophet是Facebook开源的一个用于时间序列预测的库&#xff0c;它主要用于处理具有趋势、季节性和假期…

Springboot功能模块之文件上传(minio)

一、概述 1.1什么是MinIO&#xff1f; MinIO 是一个非常轻量的服务,可以很简单的和其他应用的结合使用&#xff0c;它兼容亚马逊 S3 云存储服务接口&#xff0c;非常适合于存储大容量非结构化的数据&#xff0c;例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等。 官网…

基础第二关:8G 显存玩转书生大模型 Demo

基础任务 复现过程 结果截图 进阶任务 任务一 复现过程 结果截图 任务二 复现过程 结果截图

OpenFoam waves2foam 虚拟机 镜像 下载 Ubuntu

编译完成截图及安装版本信息&#xff1a; 下载地址(资源整理不易&#xff0c;下载使用需付费&#xff0c;且文件较大&#xff0c;不能接受请勿浪费时间下载): 链接&#xff1a;https://pan.baidu.com/s/1j0-MYpaG2rTYuizSWPFcxg?pwdmoxv 提取码&#xff1a;moxv

【String的介绍及使用】

String的介绍及使用 ## 小杨 为何学习string以及string的简单介绍 学习string类的原因 C语言中&#xff0c;字符串是以’\0’结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c; 但是这些库函数与字符串是分离开的&am…

详解基于百炼平台及函数计算快速上线网页AI助手

引言 在当今这个信息爆炸的时代&#xff0c;用户对于在线服务的需求越来越趋向于即时性和个性化。无论是寻找产品信息、解决问题还是寻求建议&#xff0c;人们都期望能够获得即时反馈。这对企业来说既是挑战也是机遇——如何在海量信息中脱颖而出&#xff0c;提供高效且贴心的…

【C语言】fseek、ftell以及rewind函数(随机文件读写)

文章目录 前言1. fseek1.1 fseek函数原型1.2 fseek函数的形式参数1.3 fseek实例演示 2. ftell2.1 ftell函数原型2.2 ftell函数的实例演示 3. rewind3.1 rewind函数原型3.2 rewind函数实例演示 前言 在之前&#xff0c;我讲过文件的顺序读写。但是我们可不可以随机读写文件呢&a…

PCL从理解到应用【09】 点云特征 | 关键点提取 | 方法汇总

前言 在PCL中&#xff0c;有多种方法和函数可以用来提取点云特征&#xff0c;本文介绍关键点提取。 提取点云关键点&#xff0c;本文介绍的方法包括&#xff1a;SIFT、Harris、NARF、ISS和SUSAN。 Harris 提取点云关键点&#xff0c;效果如下图所示&#xff1a; 白色点是原始…

MATLAB预测模型(2)

一、前言 在MATLAB中&#xff0c;进行线性回归、非线性回归以及统计回归预测可以通过多种方法实现&#xff0c;包括使用内置函数和自定义函数。下面&#xff0c;我将分别给出线性回归、非线性回归和基于统计回归进行预测的基本示例代码。 二、实现 1. 线性回归 MATLAB中的poly…

机器人主板维修|ABB机械手主板元器件故障

【ABB机器人电路板故障原因诊断】 针对上述故障现象&#xff0c;我们需要对ABB机器人IO板进行详细的故障诊断。以下是一些可能的故障原因&#xff1a; 1. 元器件老化或损坏&#xff1a;ABB机械手安全面板上的元器件在长期使用过程中可能出现老化、损坏或接触不良等问题&#xf…

PyCharm运行Python的Flask项目时,愚蠢的执行了默认Flask框架默认配置处理

一&#xff1a;问题描述 因为上半年开始学习完python后&#xff0c;开始转人工智能方向的工作内容&#xff0c;所以这半年几乎在攻关python以及人工智能方向的技能&#xff0c;但是我有喜欢用Java的一些开发的爽点。 最近整Flask的框架时发现了一个问题&#xff0c;我就在Fla…