Hướng dẫn position: sticky trong css
CSS Position Sticky đã được hỗ trợ trên hầu hết các trình duyệt (trừ IE và Opera Mini). Tuy nhiên, nó vẫn chưa được nhiều developer sử dụng. Một phần vì phải chờ quá lâu để tính năng này đuợc hỗ trợ trên các trình duyệt và khiến nó bị lãng quên. Một phần vì phần lớn developer vẫn chưa hiểu rõ về cách thức hoạt động của tính năng này. Vậy nên trong bài viết này mình sẽ giới thiệu cho các bạn về thuộc tính Position Sticky trong CSS. Show Như chúng ta đã
biết, thuộc tính Position có 4 giá trị chính mà chúng ta hay dùng đó là: Sự khác biệt chính giữa Và Position Sticky cũng tương tự như 4 giá trị trên, nhưng nó lại khác về cách thức hoạt động. Mình sẽ giải thích thêm ở dưới Ví dụ đầu tiên về Position StickyỞ ví dụ đầu tiên với Position Sticky, chúng ta có thể nhanh chóng nhận ra rằng phần tử sẽ stick lại khi chúng ta scroll đến vị trí của phần tử này.
Vấn đề là có lúc nó hoạt động, nhưng có những lúc thì lại không. Khi nó hoạt động thì phần tử được stick lại, nhưng đôi lúc nó lại không được stick lại khi scroll. Đối với những ai mà làm việc với CSS nhiều thì khó có thể chấp nhận được, vì vậy mình quyết định tìm hiểu sâu hơn về Position Sticky. Tìm hiểu về StickyTrong quá trình tìm hiểu về nó, mình đã nhận thấy rằng khi một phần tử với style là
Tuy nhiên, khi chúng ta thêm một vài phần tử vào trong phần tử container, thì nó mới thực sự hoạt động. Đó là vì khi một phần tử được set style là Position Sticky hoạt động như thế nào?CSS position sticky có 2 thành phần chính, đó là sticky item và sticky container. Sticky item là một phần tử mà chúng ta định nghĩa style cho nó là
Sticky
container là một phần tử HTML chứa các phần tử sticky bên trong. Đây là một vùng giới hạn mà các phần tử sticky bên trong được phép hoạt động. Khi bạn định nghĩa một phần tử với Đây là lý do tại sao ở trong ví dụ trên, sticky item không hoạt động vì nó là sticky item duy nhất nằm trong container. Ví dụ về Position Sticky: Như mình đã nói ở đầu bài viết, CSS Position Sticky hoạt động khác với các giá trị position khác. Tuy nhiên, nó cũng có một số điểm tương đồng với chúng. Hãy để mình giải thích: Relative (hoặc Static) - Position Sticky khá giống với 2 giá trị này, bởi vì nó vẫn giữ một khoảng cách tự nhiên trong DOM. Fixed - khi phần tử sticky được stick lại, thì nó hoạt động như một phần tử fixed và nằm nổi lên trên các phần tử khác, đồng thời nó cũng bị xoá khỏi flow. Absolute - ở cuối của phạm vi container, phần tử sẽ dừng lại và xếp chồng lên trên các phần tử khác, khá giống với Hỗ trợ trình duyệt
Tài liệu tham khảo: https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46 |