Đã đăng vào thg 1 15, 2019 6:41 SA 1 phút đọc 1 phút đọc
Trong lập trình giao diện web, khi chúng ta muốn một thành phần có sự bám dính trên giao diện, cách đơn giản nhất mọi người thường dùng là sử dụng fixed cho thuộc tính position và có thể kết hợp thêm javascript để xử lý. Tuy nhiên, CSS3 đã cung cấp một giá trị mới cho thuộc tính position là body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
0 cho phép định nghĩa các thành phần bám dính trên giao diện một cách linh hoạt, không phụ thuộc vào javascript.Hiện tại, CSS3 sticky đã hỗ trợ trên hầu hết các trình duyệt, mọi người có thể tham khảo bảng bên dưới: Cách sử dụngĐể sử dụng position sticky, mọi người chỉ cần đặt thuộc tính này vào thành phần muốn bám dính và định nghĩa khoảng cách căn các lề body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
2, body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
3, body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
4, body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
5.VD: .sticky{
position: -webkit-sticky;
position: sticky;
top: 0;
/*left: 10px;*/
/*right: 20px;*/
/*bottom: 10px;*/
}
Lưu ý- Một thành phần được định nghĩa sử dụng
body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
6 chỉ hoạt động trong thành phần cha chứa nó (Tức là: chỉ bám dính trên thành phần cha chứa nó, nếu thành phần cha bị scroll ra ngoài window thì thành phần con có sử dụng body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
0 cũng sẽ bị kéo theo).
VD: body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
- Các lề
body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
2, body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
3, body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
4, body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
5 sẽ lấy các lề của khung chứa nó làm gốc.
Ví dụ sử dụng sticky trong hiển thị bảng All rights reserved 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. đã đượ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. 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à: .some-element {
position: sticky;
top: 0;
}
2, .some-element {
position: sticky;
top: 0;
}
3, .some-element {
position: sticky;
top: 0;
}
4 và fixed.Sự khác biệt chính giữa .some-element {
position: sticky;
top: 0;
}
6 và .some-element {
position: sticky;
top: 0;
}
7 là không gian mà chúng chiếm trong website. Cụ thể hơn, Postion .some-element {
position: sticky;
top: 0;
}
2 và .some-element {
position: sticky;
top: 0;
}
3 sẽ giữ lại không gian tự nhiên của phần tử trên website, còn .some-element {
position: sticky;
top: 0;
}
4 và fixed sẽ loại bỏ không gian vốn có của phần tử đi và khiến chúng nằm trôi nổi trên các phần tử khác.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 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.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. .some-element {
position: sticky;
top: 0;
}
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.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à body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
6 được đặt trong một phần tử khác được gọi là container và trong container chỉ có một phần tử sticky mà chúng ta khởi tạo dưới đây, thì phần tử này sẽ không được stick lại.container và trong container chỉ có một phần tử sticky mà chúng ta khởi tạo dưới đây, thì
phần tử này sẽ không được stick lại.<!-- DOESN'T WORK!!! -->
<style>
.sticky {
position: sticky;
top: 0;
}
</style>
<div class="wrapper">
<div class="sticky">
SOME CONTENT
</div>
</div>
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à body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
6, thì phần tử cha liền kề của nó (tức là container trong ví dụ trên) là một vùng mà phần tử sticky có thể hoạt động được, còn nằm ngoài vùng đó phần tử sticky sẽ không hoạt động. Trong phần tử cha không có bất cứ phần tử con nào để nằm nổi lên vì nó chỉ có một phần tử con duy nhất và phần tử con này lại chính là phần tử Sticky.container, thì nó mới thực sự hoạt động. Đó là vì khi một phần tử được set style là body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
6, thì phần tử cha liền kề của nó (tức là container trong ví dụ trên) là một vùng mà phần tử sticky có thể hoạt động được, còn nằm ngoài vùng đó phần tử sticky sẽ không hoạt động. Trong phần tử cha không có bất cứ phần tử con nào để nằm nổi lên vì nó chỉ có một
phần tử con duy nhất và phần tử con này lại chính là phần tử Sticky.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. 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à body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
6. Phần tử này sẽ nằm trôi nổi trên màn hình dựa trên vị trí mà chúng ta định nghĩa: Ví dụ: <!-- DOESN'T WORK!!! -->
<style>
.sticky {
position: sticky;
top: 0;
}
</style>
<div class="wrapper">
<div class="sticky">
SOME CONTENT
</div>
</div>
5 hay <!-- DOESN'T WORK!!! -->
<style>
.sticky {
position: sticky;
top: 0;
}
</style>
<div class="wrapper">
<div class="sticky">
SOME CONTENT
</div>
</div>
6. là một phần tử mà chúng ta định nghĩa style cho nó là body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
6. Phần tử này sẽ nằm trôi nổi trên màn hình dựa trên vị trí mà chúng ta định nghĩa: Ví dụ: <!-- DOESN'T WORK!!! -->
<style>
.sticky {
position: sticky;
top: 0;
}
</style>
<div class="wrapper">
<div class="sticky">
SOME CONTENT
</div>
</div>
5 hay <!-- DOESN'T WORK!!! -->
<style>
.sticky {
position: sticky;
top: 0;
}
</style>
<div class="wrapper">
<div class="sticky">
SOME CONTENT
</div>
</div>
6..some-component {
position: sticky;
top: 0px;
}
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 body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
6 thì lúc đó bạn đang tự động định nghĩa phần tử cha là một sticky container. Điều này rất quan trọng, container là một phạm vi mà các sticky item bên trong không thể vượt ra bên ngoài nó. 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 body{
height: 2000px;
}
.cha{
width: 500px;
height: 1000px;
margin: 30px auto;
padding: 10px;
background-color: #eee;
}
.con{
width: 480px;
height: 300px;
margin-top: 30px;
background-color: #666;
position: -webkit-sticky;
position: sticky;
top: 0;
}
6 thì lúc đó bạn đang tự động định nghĩa phần tử cha là một sticky container. Điều này rất quan trọng, container là một phạm vi mà các sticky item bên trong không thể vượt ra bên ngoài nó.Đâ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.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. - 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. - 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 <!-- DOESN'T WORK!!! -->
<style>
.sticky {
position: sticky;
top: 0;
}
</style>
<div class="wrapper">
<div class="sticky">
SOME CONTENT
</div>
</div>
8 - ở 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 <!-- DOESN'T WORK!!! -->
<style>
.sticky {
position: sticky;
top: 0;
}
</style>
<div class="wrapper">
<div class="sticky">
SOME CONTENT
</div>
</div>
8Hỗ trợ trình duyệtposition: -webkit-sticky; /* Safari */
position: sticky;
Tài liệu tham khảo: https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46
https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46 | 
