CSS Sticky – Cách sử dụng thuộc tính Sticky trong CSS

Posted by Lập Trình Viên CSS 8 phút đọc

CSS Sticky là một thuộc tính CSS được sử dụng để đặt vị trí cho phần tử trong khi người dùng cuộn trang. Nó cho phép các phần tử giữ nguyên vị trí của chúng trên màn hình, thay vì bị kéo theo khi người dùng cuộn trang. Thuộc tính này rất hữu ích để cố định một phần tử như menu hoặc tiêu đề trong khi người dùng duyệt web.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Sticky là gì ?

Thuộc tính CSS Sticky cho phép các phần tử giữ nguyên vị trí của chúng trên màn hình, thay vì bị kéo theo khi người dùng cuộn trang. Điều này giúp tăng cường trải nghiệm người dùng và giúp các phần tử quan trọng như menu hoặc tiêu đề luôn được hiển thị trên màn hình.

CSS Sticky có thể được sử dụng bởi các nhà thiết kế web và phát triển web để tạo ra các phần tử cố định như menu hoặc tiêu đề. Các trang web có nhiều nội dung và yêu cầu người dùng cuộn trang cần sử dụng CSS Sticky để giữ các phần tử cố định trên màn hình cho tối ưu trải nghiệm người dùng.

Thuộc tính “position: sticky;” được sử dụng để cố định một phần tử trên màn hình khi người dùng cuộn trang. Khi người dùng cuộn trang và đến vị trí của phần tử, nó sẽ giữ nguyên vị trí của chúng trên màn hình, thay vì bị kéo theo. Điều này rất hữu ích để giữ các phần tử quan trọng như menu hoặc tiêu đề luôn hiển thị trên màn hình.

Hướng dẫn CSS Sticky

Để sử dụng CSS Sticky, ta thêm thuộc tính “position: sticky;” vào khối lệnh CSS của phần tử muốn cố định. Sau đó, ta cũng cần chỉ định giá trị của thuộc tính “top” hoặc “bottom” để xác định vị trí mà phần tử sẽ giữ nguyên trên màn hình.

Ví dụ:

.sticky-element {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Trong ví dụ này, phần tử với class “sticky-element” sẽ được cố định trên màn hình và giữ nguyên ở vị trí top của màn hình. Bên dưới là ví dụ thực tế:

<!DOCTYPE html>
<html>
   <head>
      <style>
	  body{
	  text-align:center;
	  }
      .stick{
      position: sticky;
      top:50px;
      padding: 10px;
	  font-size:20px;
	  font-weight:bold;
      background-color: lightblue;
      border: 1px solid blue;
     }
      </style>
   </head>
   <body>
      <h1>Scroll and see the effect!</h1>
      <div class = "stick">Sticky Element</div>
      <div style = "padding-bottom:2000px">
         <h2>Hello World</h2>
         <h2>Welcome to Laptrinhvien.org</h2>
      </div>
   </body>
</html>

Ưu và Nhược điểm CSS Sticky

Ưu điểm

  • Tăng cường trải nghiệm người dùng: Các phần tử quan trọng như menu hoặc tiêu đề được giữ nguyên trên màn hình, giúp người dùng dễ dàng truy cập vào các tính năng chính.
  • Tối ưu hóa không gian: Với việc giữ các phần tử cố định trên màn hình, ta có thể tối ưu hóa không gian trên trang web và hiển thị nhiều nội dung hơn.
  • Dễ dàng sử dụng: CSS Sticky rất dễ sử dụng và chỉ cần thêm m ột vài thuộc tính vào khối lệnh CSS để giữ các phần tử cố định trên màn hình.

Nhược điểm

  • Hạn chế hỗ trợ: Thuộc tính “position: sticky;” không được hỗ trợ tốt trên các phiên bản trình duyệt cũ, vì vậy ta cần thêm các tiền tố nhất định cho các trình duyệt khác nhau.
  • Không hiệu quả với các phần tử lớn: Với các phần tử có kích thước lớn, việc sử dụng CSS Sticky có thể gây lag và ảnh hưởng đến trải nghiệm người dùng.

Lời khuyên CSS Sticky

  • Sử dụng CSS Sticky chỉ với các phần tử cần thiết trên trang web để tối ưu hóa trải nghiệm người dùng và tăng tính thẩm mỹ của trang web.
  • Kiểm tra trên nhiều trình duyệt để đảm bảo rằng thuộc tính “position: sticky;” hoạt động tốt trên các trình duyệt khác nhau.
  • Nếu sử dụng cho các phần tử lớn, hãy kiểm tra kỹ xem nó có ảnh hưởng đến trải nghiệm người dùng hay không.

CSS Sticky là một tính năng hữu ích trong CSS giúp các phần tử trên trang web giữ nguyên vị trí của chúng khi người dùng cuộn trang. Điều này giúp tăng cường trải nghiệm người dùng và giúp các phần tử quan trọng như menu hoặc tiêu đề luôn được hiển thị trên màn hình. Tuy nhiên, ta cần kiểm tra kỹ trên các trình duyệt khác nhau và không nên sử dụng cho các phần tử lớn.

Mong rằng bài viết này đã giúp bạn hiểu rõ hơn về CSS Sticky và cách sử dụng nó trên trang web của bạn. Nếu bạn cần thêm thông tin hoặc có bất kỳ câu hỏi nào, xin vui lòng để lại comment phía dưới. Chúc bạn thành công! 

1. CSS Sticky hoạt động như thế nào?

CSS Sticky cho phép các phần tử giữ nguyên vị trí của chúng trên màn hình, thay vì bị kéo theo khi người dùng cuộn trang. Điều này giúp tăng cường trải nghiệm người dùng và giúp các phần tử quan trọng như menu hoặc tiêu đề luôn được hiển thị trên màn hình.

2. Các thuộc tính nào được sử dụng để thiết lập CSS Sticky?

Để sử dụng CSS Sticky, ta cần thêm thuộc tính “position: sticky;” vào khối lệnh CSS của phần tử muốn cố định. Sau đó, ta cần chỉ định giá trị của thuộc tính “top” hoặc “bottom” để xác định vị trí mà phần tử sẽ giữ nguyên trên màn hình.

3. Các trình duyệt nào hỗ trợ CSS Sticky?

Hiện tại, các trình duyệt mới nhất đều hỗ trợ thuộc tính “position: sticky;”. Tuy nhiên, với các phiên bản trình duyệt cũ, ta cần thêm các tiền tố nhất định để đảm bảo hoạt động tốt.

4. Các phần tử nào thường được sử dụng với CSS Sticky?

CSS Sticky thường được sử dụng để giữ nguyên vị trí của các phần tử quan trọng như menu, tiêu đề hoặc thanh điều hướng.

5. CSS Sticky có nhược điểm gì?

Thuộc tính “position: sticky;” không được hỗ trợ tốt trên các phiên bản trình duyệt cũ và có thể gây lag với các phần tử lớn.