如何使用 JavaScript 實現網頁頂部固定導航欄的收縮效果？
在現代網頁設計中，固定導航欄已經成為了一個常見的設計元素。當用戶滾動頁面時，固定導航欄可以一直保持在頁面頂部，使得用戶可以方便地瀏覽網頁的不同部分。而為了提升用戶體驗，有時我們希望在頁面向下滾動時，固定導航欄能夠收縮起來，以節省頁面空間。本文將介紹如何使用 JavaScript 實現這一效果。
首先，在 HTML 文件中添加一個固定導航欄的容器，可以使用 nav 元素來實現：
<nav id="navbar">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系方式</a></li>
</ul>
</nav>
登錄后復制
接下來，添加 CSS 樣式使導航欄固定在頁面的頂部，并設置初始高度和過渡效果：
#navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #ffffff;
transition: height 0.3s ease-in-out;
height: 60px; /* 初始高度 */
z-index: 9999;
}
#navbar.shrink {
height: 40px; /* 收縮后的高度 */
}
登錄后復制
在 JavaScript 中實現導航欄的收縮效果主要是通過監聽頁面滾動事件來控制導航欄的樣式。
window.addEventListener('scroll', function() {
var navbar = document.getElementById('navbar');
var scrollPosition = window.pageYOffset;
if (scrollPosition > 100) { // 根據具體需求調整滾動位置的閥值
navbar.classList.add('shrink');
} else {
navbar.classList.remove('shrink');
}
});
登錄后復制
在上述代碼中，我們使用 window.addEventListener 監聽 scroll 事件，當頁面滾動時觸發回調函數。在回調函數中，我們首先獲取導航欄的元素，并使用 window.pageYOffset 獲取滾動的垂直偏移量。根據具體需求，可以調整判斷導航欄收縮的滾動位置閥值。
當頁面滾動的垂直偏移量超過閥值時，我們添加 shrink 類名到導航欄元素上，觸發 CSS 中定義的收縮樣式。當滾動回到閥值以下時，我們移除 shrink 類名，導航欄恢復初始樣式。
最后，在頁面中引入所寫的 JavaScript 代碼：
<script src="script.js"></script>
登錄后復制
以上就是使用 JavaScript 實現網頁頂部固定導航欄收縮效果的具體步驟和代碼示例。通過監聽滾動事件，我們可以根據頁面的滾動位置來動態改變導航欄的樣式，實現收縮效果。這樣用戶在瀏覽網頁時會有更好的體驗，同時也能節省頁面的空間。
以上就是如何使用 JavaScript 實現網頁頂部固定導航欄的收縮效果？的詳細內容，更多請關注www.92cms.cn其它相關文章！
