图片演示
网页上下滚动前
网页上下滚动后
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>
