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;
width: 1200px;
height: 70px;
js导航栏下拉菜单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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。