圖片演示

網(wǎng)頁(yè)上下滾動(dòng)前

網(wǎng)頁(yè)上下滾動(dòng)后

html代碼

<!-- 第一大部分 --><div class="bg1"><!-- 導(dǎo)航欄 --><div class="nav" ><div class="box"><div class="logo"><img src="images/logo.png"></div><div class="nav-text"><a href="">產(chǎn)品</a><a href="">行業(yè)方案</a><a href="">客戶(hù)成功</a><a href="">云市場(chǎng)</a><a href="">服務(wù)與認(rèn)證</a><a href="">合作伙伴</a><a href="">商城</a><a href="">關(guān)于</a></div><div class="nav-right"><img src="images/serch.png" alt=""><a class="sousuo" href="#">登錄</a><a class="zhuce" href="#">注冊(cè)</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; } /* 導(dǎo)航欄 */ .nav {width: 100%;height: 70px;position: fixed;background-color: transparent; } /* 導(dǎo)航欄 鼠標(biāo)移動(dòng)到位置變更顏色 */ .nav:hover {background-color: #111111; } /* 導(dǎo)航欄內(nèi)部組件 */ .nav .box {width: 1200px;height: 70px;margin: 0 auto;display: flex; } /* 導(dǎo)航欄-logo */ .nav .box .logo {height: 70%;width: 200px;margin: auto; } .nav .box .logo img{height: 100%;width: auto; } /* 導(dǎo)航欄-標(biāo)簽 */ .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;//獲取導(dǎo)航欄變色的位置距頂部的高度var scrollTop = $(window).scrollTop();//獲取當(dāng)前窗口距頂部的高度if (scrollTop <= top) {$('.nav').css('background-color', 'transparent');} else {$('.nav').css('background-color', '#111111');}}$(window).on('scroll', function() {scroll()});</script>

?

總結(jié)

以上是生活随笔為你收集整理的CSS布局——导航栏悬浮滚动更改背景色的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。