CSS布局——导航栏悬浮滚动更改背景色

图片演示

网页上下滚动前

网页上下滚动后

html代码

    <!-- 第一大部分 -->
	<div class="bg1">
		<!-- 导航栏 -->
		<div class="nav" >
			<div class="box">
				<div class="logo">
					<img src="images/logo.png">
				</div>
				
				<div class="nav-text">
					<a href="">产品</a>
					<a href="">行业方案</a>
					<a href="">客户成功</a>
					<a href="">云市场</a>
					<a href="">服务与认证</a>
					<a href="">合作伙伴</a>
					<a href="">商城</a>
					<a href="">关于</a>
				</div>
				<div class="nav-right">
					<img src="images/serch.png" alt="">
					<a class="sousuo" href="#">登录</a>
					<a class="zhuce" href="#">注册</a>
				</div>
			</div>
		</div>
	</div>
	<!-- 第二大部分 -->
	<div class="bg2">
		
	</div>

css代码

* {
	margin: 0;
	padding: 0;
}
body{
	background-color: #eeeeee;
}

/* 大banner */
.bg1 {
	width: 100%;
	background-color: lightblue;
	height: 560px;
	background-repeat:no-repeat;
}
/* 导航栏 */
.nav {
	width: 100%;
	height: 70px;
	position: fixed;
	background-color: transparent;
}
/* 导航栏 鼠标移动到位置变更颜色 */
.nav:hover {
	background-color: #111111;
}
/* 导航栏内部组件 */
.nav .box {
	width: 1200px;
	height: 70px;
	margin: 0 auto;
	display: flex;
}
/* 导航栏-logo */
.nav .box .logo {
	height: 70%;
	width: 200px;
	margin: auto;
}
.nav .box .logo img{
	height: 100%;
	width: auto;
}
/* 导航栏-标签 */
.nav .box .nav-text {
	text-align: center;
	margin: auto;
}

.nav .box .nav-text a {
	display: inline-block;
	line-height: 70px;
	margin-right: 20px;
	font-size: 20px;
	color: #ffffff;
	font-weight: 500;
	text-decoration: none;
}

.nav .box .nav-right {
	height: 70%;
	width: 200px;
	margin: auto;
	display: flex;
}

.nav .box .nav-right img{
	width: auto;
	height: 50%;
	margin: auto;
}
.nav .box .nav-right .sousuo {
	padding: 5px 20px 5px 20px;
	background-color: #0086F2;
	font-size: 15px;
	color: #FFFFFF;
	font-weight: 500;
	margin: auto;
	text-decoration: none;
	border-radius: 5px;
}
.nav .box .nav-right .zhuce {
	padding: 5px 20px 5px 20px;
	background-color: #0086F2;
	font-size: 15px;
	color: #FFFFFF;
	font-weight: 500;
	margin: auto;
	text-decoration: none;
	border-radius: 5px;
}

/* 第二大部分 */
.bg2 {
	width: 100%;
	height: 864px;
	background-color: lightgoldenrodyellow;
}

js代码

    <script>
		function scroll() {
			var top = $(".bg1").offset().top;//获取导航栏变色的位置距顶部的高度
			var scrollTop = $(window).scrollTop();//获取当前窗口距顶部的高度
			if (scrollTop <= top) {
				$('.nav').css('background-color', 'transparent');
			} else {
				$('.nav').css('background-color', '#111111');
			}
		}
		$(window).on('scroll', function() {
			scroll()
		});
	</script>