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

news2024/9/20 19:44:19

一、效果图

图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>