Khi thiết kế trang web, đôi khi bạn muốn giữ một phần tử ở vị trí cố định trên trang web khi người dùng cuộn trang. Để làm được điều này, bạn có thể sử dụng hai thuộc tính position: sticky và position: fixed.

 

STICKY và FIXED

position: sticky là một thuộc tính mới trong CSS3, nó giúp giữ một phần tử ở vị trí cố định trên trang web khi người dùng cuộn trang. Tuy nhiên, nó chỉ hoạt động trong một số trường hợp nhất định. Các yếu tố quan trọng để sử dụng position: sticky bao gồm:

  • Phần tử phải có một kích thước cụ thể, hoặc đang ở trong một phần tử có kích thước cụ thể.
  • Phần tử phải có một giá trị top, bottom, left hoặc right được định nghĩa.
  • Phần tử phải có một phần tử cha với thuộc tính overflow: hidden hoặc overflow: auto.

Trong khi đó, position: fixed là một thuộc tính khác trong CSS, cho phép giữ một phần tử ở vị trí cố định trên trang web, bất kể người dùng cuộn trang đến đâu. Điều này làm cho nó trở thành một lựa chọn phổ biến để tạo các phần tử cố định như thanh trượt và các nút bấm dẫn đến đầu trang.

Dưới đây là các ví dụ cho cả position: sticky và position: fixed.

 

Ví dụ cho position: sticky

Trong ví dụ này, chúng ta sẽ tạo một tiêu đề cho trang web, và sau đó sử dụng thuộc tính position: sticky để giữ tiêu đề ở vị trí cố định khi người dùng cuộn trang.

HTML:

<body>
  <header>
    <h1>Đây là tiêu đề trang web</h1>
  </header>
  <main>
    <p>Đây là nội dung trang web</p>
  </main>
</body

CSS:

body {
	height: 5000px;
    margin: 0;
}
header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 999;
  padding: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

 

Trong ví dụ trên, chúng ta đã đặt thuộc tính position: sticky cho phần tử header, để giữ tiêu đề ở vị trí cố định khi người dùng cuộn trang. Chúng ta đã thiết lập giá trị top: 0 để tiêu đề luôn được giữ ở phía trên của trang web. Chúng ta cũng đã đặt một số thuộc tính khác như background-color, z-index, padding và box-shadow để tùy chỉnh cho phù hợp với thiết kế của trang web.

 

Ví dụ cho position: fixed

Trong ví dụ này, chúng ta sẽ tạo một nút bấm "Back to top" và sử dụng thuộc tính position: fixed để giữ nó ở vị trí cố định trên trang web, dẫn đến đầu trang khi người dùng nhấp vào.

HTML:

<body>
  <main>
    <!-- Nội dung trang web -->
  </main>
  <button id="back-to-top">Back to top</button>
</body>

CSS

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: block;
  z-index: 999;
  padding: 10px 15px;
  background-color: #007bff;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

 

Trong ví dụ trên, chúng ta đã đặt thuộc tính position: fixed cho phần tử #back-to-top, để giữ nút bấm ở vị trí cố định trên trang web. Chúng ta đã thiết lập giá trị bottom: 20px và right: 20px để đặt nút bấm ở góc dưới bên phải của trang web. Chúng ta cũng đã đặt một số thuộc tính khác như display, z-index, padding, background-color, color, border-radius và cursor để tùy chỉnh cho phù hợp với thiết kế của trang web.

Để hiển thị nút bấm khi người dùng cuộn trang, chúng ta đã sử dụng Javascript để thêm lớp show vào phần tử #back-to-top khi người dùng cuộn xuống một khoảng cách nhất định (window.pageYOffset > 100). Khi người dùng nhấp vào nút bấm, 

chúng ta sử dụng Javascript để cuộn đến đầu trang bằng cách sử dụng thuộc tính window.scrollTo().

Javascript:

window.addEventListener('scroll', function() {
  var backToTop = document.getElementById('back-to-top');
  if (window.pageYOffset > 100) {
    backToTop.classList.add('show');
  } else {
    backToTop.classList.remove('show');
  }
});

var backToTop = document.getElementById('back-to-top');
backToTop.addEventListener('click', function() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

 

Trong ví dụ trên, chúng ta đã sử dụng phương thức addEventListener() để thêm một sự kiện cuộn trang vào cửa sổ trình duyệt. Nếu người dùng cuộn xuống một khoảng cách nhất định (window.pageYOffset > 100), chúng ta thêm lớp show vào phần tử #back-to-top. Nếu không, chúng ta loại bỏ lớp show khỏi phần tử #back-to-top.

Chúng ta cũng đã sử dụng phương thức addEventListener() để thêm một sự kiện nhấp vào nút bấm "Back to top". Khi người dùng nhấp vào nút bấm, chúng ta sử dụng phương thức window.scrollTo() để cuộn đến đầu trang với hiệu ứng mượt mà (behavior: 'smooth').

 

Kết luận:

Dưới đây là bảng so sánh giữa position: sticky và position: fixed:

 

Điểm so sánh position: sticky position: fixed
Cách thức hoạt động Giữ phần tử ở vị trí cố định sau khi cuộn đến ngưỡng được định nghĩa Tạo ra một phần tử cố định trên trang web
Vị trí ban đầu Xuất hiện ở vị trí bình thường của nó trong luồng tài liệu Được đặt tại vị trí xác định trong CSS
Hỗ trợ trình duyệt Hỗ trợ trên Chrome, Safari, Firefox, Opera, và Edge Hỗ trợ trên hầu hết các trình duyệt hiện đại
Hiệu suất Có thể có hiệu suất kém hơn so với position: fixed khi có nhiều phần tử dùng position: sticky

Không gây tác động đến hiệu suất trang web

 

Khi sử dụng đúng cách, cả hai thuộc tính này đều có thể giúp cải thiện trải nghiệm người dùng trên trang web. Tuy nhiên, bạn cần phải hiểu rõ sự khác nhau giữa chúng để sử dụng đúng cách và đạt được kết quả mong muốn.