有個項目需求，如題目所示。這種展示方式讓首頁的內容可以完美展示而不受到導航欄的干擾，等下滑查看內容時導航欄的背景顏色再顯示出來。下面是一個案例：
導航欄隨滑動條下滑顯示
再下面是我的成果視頻展示：
導航條隨滾動條下滑顯示-示例
下面放上源代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<nav id="dao"><x-icon type="ios-arrow-back" size="30" class="cell-back"></x-icon><h4 id="navtext">{{Jingyuan}}</h4>
</nav>
</body>
</html><style>body {height: 2000px;background-color: #121212;}#dao {position: fixed;left: 0;top: 0;right: 0;width: 100%;height: 5rem;z-index: 999;}#navtext {position: absolute;left: 50%;top: 50%;text-align: center;transform: translate(-50%, -50%);color: #e5d3d4;}
</style><script>window.onscroll = function a () {var h = document.documentElement.scrollTop || document.body.scrollTop;var headerTop = document.getElementById('dao'); // 獲取導航欄id// 過了這個高度，直接透明度拉滿if (h > 100) { // header的高度是40px（不理解）headerTop.style.background = '#ff5d4c';} else if (h <= 100) {headerTop.style.background = "rgba(0, 0, 0, 0)";}}
</script>非常簡單，有需要的伙伴可以根據自己實際情況自行修改
)
