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

最新推荐文章于 2024-02-23 17:01:58 发布

置顶 Hao-Z-Y

最新推荐文章于 2024-02-23 17:01:58 发布

阅读量8.5k

点赞数 2

分类专栏： js运用文章标签：导航栏变色 js控制导航栏变色 js控制导航栏滑动变色导航栏滑动变色

本文链接：https://blog.csdn.net/weixin_41634608/article/details/83309515

版权

js运用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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).scrollTop();//获取当前窗口距顶部的高度
				if (scrollTop < top) {
					$('.nav').css('opacity', 1);
				} else {
					$('.nav').css('opacity', 0.1);
				}
			}
			$(window).on('scroll', function() {
				scroll()
			});
		</script>
	</body>
</html>

Hao-Z-Y

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
JS控制网页滑动顶部导航条变色

&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!--引入jQuery--&gt; &lt;script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js&quot
复制链接

扫一扫