JS控制网页滑动顶部导航条变色

最新推荐文章于 2024-05-09 00:59:18 发布

原创

最新推荐文章于 2024-05-09 00:59:18 发布 · 置顶 · 8.7k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#导航栏变色 #js控制导航栏变色 #js控制导航栏滑动变色 #导航栏滑动变色

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<!--引入jQuery-->
		<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
		<title>Js控制网页滑动的时候顶部导航条变成半透明</title>
		<style type="text/css">
			.main {
				width: 100%;
				height: 2000px;
				background: gray;
			}

			.nav {
				width: 100%;
				height: 100px;
				background: black;
				position: fixed;
				top: 0;
			}

			.content {
				position: f;
				top: 0;
				right: 0;
				left: 0;
				bottom: 2.5rem;
			}

			.place {
				width: 100%;
				height: 300px;
				margin-top: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="nav"></div>
		<div class="main">
			<div class="place"></div>
		</div>
		<script>
			function scroll() {
				var top = $(".place").offset().top;//获取导航栏变色的位置距顶部的高度
				var scrollTop = $(window