使用 fixed positioning 實現網頁元素的固定位置

一、什麼是 fixed positioning

Fixed positioning 是指將元素固定在頁面上的某個位置，不隨頁面滾動而移動的一種 CSS 布局方式。使用 fixed positioning 最常見的場景是固定導航欄、側邊欄或廣告等元素。

在使用 fixed positioning 時，需要指定元素的 left、right、top 和 bottom 四個位置屬性。同時，元素的位置參照於瀏覽器窗口而非文檔流。

二、如何使用 fixed positioning 實現網頁元素的固定位置

1. 固定頂部導航欄

<nav class="navbar">
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">新聞</a></li>
    <li><a href="#">關於我們</a></li>
  </ul>
</nav>


.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: 9999;
}

通過將頂部導航欄的 position 屬性設置為 fixed、top 和 left 屬性設置為 0，即可將導航欄固定在瀏覽器窗口的頂部。

2. 固定側邊欄

<div class="sidebar">
  <ul>
    <li><a href="#">菜單1</a></li>
    <li><a href="#">菜單2</a></li>
    <li><a href="#">菜單3</a></li>
  </ul>
</div>


.sidebar {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.sidebar ul {
  padding: 0;
  list-style: none;
  background-color: #fff;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.08);
}
.sidebar li {
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid #f2f2f2;
}

通過將側邊欄的 position 屬性設置為 fixed、top 屬性設置為 50%、transform 屬性設置為 translateY(-50%)，即可將側邊欄垂直居中。此外，還需將 left 屬性設置為 0，將側邊欄固定在瀏覽器窗口的左側。

3. 固定返回頂部按鈕

<button class="back-to-top"><i class="fa fa-arrow-up"></i></button>


.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #ccc;
  border: none;
  outline: none;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}



const backToTop = document.querySelector('.back-to-top');

window.addEventListener('scroll', function() {
  if (window.scrollY > 500) {
    backToTop.classList.add('active');
  } else {
    backToTop.classList.remove('active');
  }
});

backToTop.addEventListener('click', function() {
  window.scrollTo(0, 0);
});

通過將返回頂部按鈕的 position 屬性設置為 fixed，bottom 和 right 屬性分別設置為距離瀏覽器窗口底部和右側的距離，即可將按鈕固定在瀏覽器窗口的右下角。此外，還可以通過監聽 window 對象的 scroll 事件，來判斷用戶是否已滾動了一定距離，並根據情況控制按鈕的顯示與隱藏。

三、總結

以上是使用 fixed positioning 實現網頁元素的固定位置的一些例子。通過設置 position、top、left、bottom 和 right 等屬性，可以實現固定頂部導航欄、側邊欄、返回頂部按鈕等元素。但同時也需要注意，元素的固定位置可能會影響其他元素的布局，因此在實際應用中需要根據具體情況進行適當的處理。