Những bài học
Bắt đầu
Bắt đầu học
CodeGym /Các khóa học /Frontend SELF VI /Vị trí dính

Vị trí dính

Frontend SELF VI
Mức độ , Bài học
Có sẵn

6.1 position: sticky

Vị trí dính (position: sticky) trong CSS kết hợp thuộc tính của vị trí tương đối và vị trí cố định. Các phần tử với vị trí dính hoạt động giống như được đặt vị trí tương đối cho đến khi chúng đạt đến ngưỡng cuộn được chỉ định, sau đó chúng trở thành cố định.

Tính năng của vị trí dính:

  • Phần tử với position: sticky hoạt động giống như được đặt vị trí tương đối cho đến khi nó đạt đến vị trí cuộn nhất định
  • Sau khi đạt đến ngưỡng chỉ định, phần tử trở nên cố định và giữ nguyên vị trí cho đến khi vượt qua ngưỡng cuộn khác
  • Vị trí dính chỉ hoạt động trong phạm vi phần tử cha. Khi phần tử cha vượt ra ngoài ranh giới của vùng xem, phần tử dính mất đi thuộc tính cố định của nó

Cú pháp của vị trí dính

Để áp dụng vị trí dính, sử dụng thuộc tính position: sticky và tọa độ top, right, bottom hoặc left để xác định ngưỡng cuộn. 

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

Ở đâu:

  • top: khoảng cách từ cạnh trên của cửa sổ trình duyệt đến cạnh trên của phần tử
  • right: khoảng cách từ cạnh phải của cửa sổ trình duyệt đến cạnh phải của phần tử
  • bottom: khoảng cách từ cạnh dưới của cửa sổ trình duyệt đến cạnh dưới của phần tử
  • left: khoảng cách từ cạnh trái của cửa sổ trình duyệt đến cạnh trái của phần tử

Ví dụ:

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>

Trong ví dụ này, tiêu đề với lớp .header sẽ giữ nguyên vị trí khi cuộn trang, cho đến khi cạnh trên của nó chạm đến cạnh trên của cửa sổ xem.

6.2 Ưu điểm và nhược điểm của vị trí dính

Ưu điểm của vị trí dính

  1. Tăng cường giao diện người dùng:
    • Các phần tử dính như tiêu đề, thanh điều hướng và thanh bên cải thiện việc điều hướng và khả năng truy cập nội dung trên các trang dài, luôn hiển thị cho người dùng
  2. Kết hợp ưu điểm của vị trí tương đối và cố định:
    • Vị trí dính cho phép các phần tử giữ nguyên trong luồng tài liệu, duy trì vị trí tương đối của chúng, cho đến khi đạt ngưỡng cuộn. Điều này mang lại hành vi tự nhiên hơn cho các phần tử
  3. Dễ dàng triển khai:
    • Vị trí dính dễ dàng triển khai với mã tối thiểu và không cần sử dụng JavaScript

Nhược điểm của vị trí dính

  1. Hỗ trợ hạn chế trong các trình duyệt cũ:
    • Vị trí dính được hỗ trợ bởi hầu hết các trình duyệt hiện đại, nhưng có thể không hoạt động trong các phiên bản trình duyệt cũ, điều này có thể yêu cầu các giải pháp bổ sung để tương thích
  2. Phụ thuộc vào các phần tử cha:
    • Vị trí dính chỉ hoạt động trong phạm vi phần tử cha. Nếu phần tử cha vượt ra ngoài ranh giới của vùng xem, phần tử dính mất đi thuộc tính cố định của nó
  3. Vấn đề với việc chồng lắp nội dung:
    • Các phần tử dính có thể chồng lắp các phần tử khác trên trang, nếu chiều cao hoặc chiều rộng của chúng không được tính đến khi thiết kế bố cục

6.3 Ví dụ sử dụng vị trí dính

1. Thanh bên dính

Tạo một thanh bên dính, luôn hiển thị khi cuộn nội dung.

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>

Trong ví dụ này, thanh bên với lớp .sidebar sẽ giữ nguyên vị trí khi cuộn nội dung.

2. Tiêu đề bảng dính

Tạo tiêu đề bảng dính, luôn hiển thị khi cuộn một lượng lớn dữ liệu.

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>

Trong ví dụ này, tiêu đề bảng sẽ giữ nguyên vị trí khi cuộn nội dung của bảng.

Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION