position:sticky đã quay trở lại trong Chrome

Paul Kinlan

Bốn năm trước, Eric Bidelman đã tạo một bài đăng trên blog khá hay về thực tế là position: sticky đã chuyển đến WebKit, vào thời điểm đó là công cụ hỗ trợ Chrome (cũng như nhiều trình duyệt khác bao gồm Safari). Một năm sau, và điều khiến các nhà phát triển web ngạc nhiên, chúng tôi đã xoá position:sticky khỏi Chrome vì "cách triển khai hiện tại không được thiết kế theo cách tích hợp tốt với hệ thống cuộn và kết hợp hiện có".

Chúng tôi luôn muốn đưa tính năng này quay lại Chrome như lỗi đã nêu: "Sau khi thiết lập xong ngôi nhà cuộn và tổng hợp, chúng ta nên quay lại position: sticky và triển khai tính năng này theo cách tích hợp tốt với phần còn lại của công cụ". Chúng tôi đã triển khai lỗi meta theo dõi việc triển khai từ năm 2013.

Tin vui là kể từ phiên bản Chrome 56 (hiện đang là bản thử nghiệm beta kể từ tháng 12 năm 2016, chính thức vào tháng 1 năm 2017), position: sticky hiện đã quay lại Chrome.

Position:sticky là gì?

Phải mất một chút thời gian mới đến được đây, vậy tại sao tôi lại hào hứng ở đây?

position:sticky là một thuộc tính vị trí CSS cho phép bạn cố định một phần tử vào khung nhìn (tức là neo phần tử đó lên đầu màn hình) nhưng chỉ khi phần tử mẹ của phần tử đó xuất hiện trong khung nhìn và nằm trong giá trị ngưỡng. Khi không được cố định vào khung nhìn, phần tử này sẽ hoạt động như thể đó là position: relative. Đây là một tính năng bổ sung rất hay và đơn giản cho nền tảng, giúp bạn không cần phải sử dụng JavaScript trong trình xử lý sự kiện onscroll chỉ để khoá một phần tử ở đầu khung nhìn.

Đây là giao diện trên blog của tôi. Nhờ đó, tôi có thể giữ tiêu đề của phần hiện tại ở đầu màn hình trong khi bạn đọc các bài viết khá dài và tốn công sức của tôi :\

Để triển khai tính năng này, hãy chỉ định thuộc tính position phải có giá trị sticky trên phần tử mà bạn muốn gặp khó khăn. Ngoài ra, bạn cũng có thể thêm phần bù trừ vào vị trí cần khắc phục.

    h3 {
      /* Element will be 'fixed' when it ... */
      position: sticky;
      /* ... is 10px from the top of the viewport */
      top: 10px;
    }

Ví dụ trước sẽ sửa phần tử <h3> ở vị trí 10px tính từ đầu khung nhìn. Để sửa lỗi trực tiếp lên đầu khung nhìn, bạn cần đặt thuộc tính top là top: 0px.

Chúng tôi hỗ trợ tính năng này khá mạnh mẽ. Tính năng này hoạt động trên Chrome (yay), Firefox và Safari. Dưới đây là thông tin chi tiết khác về position:sticky:

• Quy cách
• MDN