HTML5 & CSS3

Sticky Sidebar bằng CSS. Tại sao không?

Chia sẻ nhanh

Sticky Sidebar là cách gọi thông dụng của web designer hiện nay. Nó cho phép sidebar của bạn bám dính khi scroll down. Có cả trăm cách để làm việc này, phổ thông nhất vẫn là sử dụng jquery.

Điển hình như:

1. Sticky Plugin (http://stickyjs.com/)

2. stickyMojo (http://mojotech.github.com/stickymojo/)

3. Sticky Sidebar jQuery plugin (http://www.profilepicture.co.uk/sticky-sidebar-jquery-plugin/)

4. lockfixed jQuery plugin (https://github.com/ymschaap/jquery-lockfixed#readme)

5. stickyfloat (https://github.com/yairEO/stickyfloat#readme)

6. Sticky Footer (http://codecanyon.net/item/sticky-footer/full_screen_preview/168476)

7. Sticklr (http://codecanyon.net/item/sticklr-sticky-side-panel-css3-jquery-plugin/full_screen_preview/302039)

8. fixedposition (http://code.google.com/p/fixedposition/)

9. jQuery Sticky Sidebar (http://daviferreira.github.com/jquery_sticky_sidebar/)

10. jquery.fixer.js (http://yckart.github.com/jquery.fixer.js/)

11. StickyScroll (https://jsfiddle.net/e9V5S/show/)

12. Sticky-Element (https://jsfiddle.net/aKuHs/show/)

tuy nhiên, chỉ với thuộc tính mới của position, chúng ta có thể làm việc đó chỉ với vài dòng lệnh thuần chất của css

Sticky Position

sticky là một giá trị mới cho thuộc tính position. Nó có cách thức hiển thị tương tự như relative, nhưng lại được bám dính theo khi scroll down. Nó không ảnh hưởng đến vị trí của các thẻ liền kề và không mất đi các phần tử nằm trong nó.

Vào ngay ví dụ luôn cho nóng

#sidebar {
    position: -webkit-sticky;  // required for Safari
    position: sticky;
    top: 0; // required as well.
} 

Có thể đặt giá trị của top để thêm khoảng cách giữa #sidebar với phần header như ví dụ trên website này.

Tích tương thích

Trên đây là tính tương thích của thuộc tính này với các trình duyệt. Nếu sài sticky thì nặng nhất bạn phải chấp nhận bỏ IE, nói không với Operamini. Tuy nhiên để hỗ trợ các trình duyệt này, tôi lại giới thiệu cho bạn một plugin siêu dễ được gọi là

Polyfill

Điều bạn chỉ cần làm duy nhất là vô đây https://github.com/wilddeer/stickyfill, download về, include thư viện vào rồi gọi

$('#sidebar').Stickyfill();

là xong.

 

Chúc các bạn thành công với thủ thuật đơn giản này. 

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?