圖片演示

網頁上下滾動前

網頁上下滾動后

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>

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。