如何在 Bootstrap 中建立黏性導覽列？-css教學-PHP中文網

如何在 Bootstrap 中建立黏性導覽列？

Patricia Arquette

發布： 2024-12-03 15:14:15

原創

685 人瀏覽過

How to Create a Sticky Navigation Bar in Bootstrap?

如何在Bootstrap 中實現粘性導航列

理解問題

在這種情況下，目標是創建一個保留的導航欄頁面加載時位於視窗底部。當使用者向下捲動時，導覽列應向上捲動並固定在頁面頂部。

製作黏性導覽列

HTML 和 CSS：

<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>

登入後複製

#nav-container {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #202020;
  z-index: 10;
}

.nav-menu {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

.nav-menu > li {
  margin: 0 10px;
}

.nav-menu > li > a {
  color: #ffffff;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 5px;
}

.sticky {
  position: fixed;
  top: 0;
}

登入後複製

實作固定性

JavaScript:

const menuElement = document.getElementById("nav-container");

window.addEventListener("scroll", () => {
  if (window.scrollY > 100) {
    menuElement.classList.add("sticky");
  } else {
    menuElement.classList.remove("sticky");
  }
});
````
This code adds the "sticky" class to the navigation bar element when scrolling down more than 100 pixels. When scrolling back up to a point where it's no longer fixed, the "sticky" class is removed.

**CSS:**

登入後複製

/黏狀態樣式/
.sticky {
背景顏色: #ffffff;
框陰影: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

}

This styling can be customized to match the desired appearance of the fixed navigation bar.

登入後複製

以上是如何在 Bootstrap 中建立黏性導覽列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！