課堂
開始
開始學習
CodeGym /Java Adesua /Frontend SELF TW /黏性定位

黏性定位

Frontend SELF TW
等級 22 , 課堂 0
開放

6.1 position: sticky

黏性定位 (position: sticky) 在 CSS 中結合了相對定位和固定定位的特性。 設置了黏性定位的元素在達到設定的滾動門檻前，行為像是相對定位，在達到門檻之後，它們就會變成固定的。

黏性定位的特點：

  • 設定 position: sticky 的元素在到達特定滾動位置前，行為會像是相對定位
  • 到達設定的門檻後，元素會變成固定的，並保持在原位直到超過另一個滾動門檻
  • 黏性定位只在父容器範圍內有效。當父容器超出視窗範圍時，黏性元素的固定特性會失效

黏性定位的語法

使用 position: sticky 及坐標屬性 top, right, bottom 或 left 來定義滾動門檻。 

    
      .element {
        position: sticky;
        top: value;
        right: value;
        bottom: value;
        left: value;
      }

其中：

  • top: 瀏覽器窗口上邊緣到元素上邊緣的距離
  • right: 瀏覽器窗口右邊緣到元素右邊緣的距離
  • bottom: 瀏覽器窗口下邊緣到元素下邊緣的距離
  • left: 瀏覽器窗口左邊緣到元素左邊緣的距離

例子：

CSS
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .header {
        position: sticky;
        top: 0;
        background-color: deepskyblue;
        padding: 10px;
        font-size: 24px;
        color: white;
      }

      .content {
        margin-top: 25px;
        background-color: lightgrey;
        padding: 20px;
      }
HTML
    
      <div class="wrapper">
        <div class="header">Sticky Header</div>
        <div class="content">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        </div>
      </div>

在這個例子中，具有 .header 類的標題會在滾動頁面時保持原位，直到其上邊緣達到視窗上邊緣。

6.2 黏性定位的優缺點

黏性定位的優點

  1. 改善使用者介面：
    • 黏性元素，例如標題、導航欄和側欄，可以改善長頁面的導航和內容可訪問性，保持對使用者可見
  2. 結合相對和固定定位的優勢：
    • 黏性定位允許元素保持在文檔流中，保留其相對位置，直到達到滾動門檻。這提供了更自然的元素行為
  3. 實現簡單：
    • 黏性定位很容易實現，只需要最少的代碼且不需要使用 JavaScript

黏性定位的缺點

  1. 在舊版瀏覽器中的支持有限：
    • 黏性定位大多數現代瀏覽器支持，但在舊版瀏覽器中可能無效，這可能需要額外的兼容性解決方案
  2. 依賴於父容器：
    • 黏性定位僅在父容器範圍內工作。當父容器超出視窗邊界時，黏性元素會失去其固定屬性
  3. 內容覆蓋問題：
    • 黏性元素可能會覆蓋頁面上的其他元素，如果它們的高度或寬度在設計佈局時沒有得到考慮

6.3 黏性定位的使用範例

1. 黏性側欄

創建一個黏性側欄，當內容滾動時保持可見。

CSS
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .container {
        display: flex;
      }

      .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        background-color: lightgreen;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 20px;
      }
HTML
    
      <div class="wrapper">
        <div class="container">
          <div class="sidebar">Sticky Sidebar</div>
          <div class="content">
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          </div>
        </div>
      </div>

在這個例子中，具有 .sidebar 類的側欄會在滾動內容時保持在原位。

2. 黏性表格標題

創建一個黏性表格標題，當滾動大量數據時保持可見。

CSS
    
        .wrapper {
          height: 200px;
          overflow: auto;
        }

        table {
          width: 100%;
          border-collapse: collapse;
        }

        th, td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        th {
          position: sticky;
          top: 0;
          background-color: deepskyblue;
          color: white;
        }

        tbody {
          min-height: 300px;
          display: block;
        }

        tbody tr {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
HTML
    
      <div class="wrapper">
        <table>
          <thead>
            <tr>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
          </tbody>
        </table>
      </div>

在這個例子中，表格的標題會在滾動表格內容時保持在原位。

留言
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION