Share Tạo sticky dễ dàng với hiệu ứng đẹp bằng thư viện UIkit

filiallion

Administrator
Staff member
Administrator
Messages
498
Points
10
Language
Tiếng Việt
Khi các bạn thiết kế trình đơn (Menu) website thì thường các bạn sẽ giữ trình đơn này luôn hiện diện bằng chức năng gọi là sticky. Hiện tại, phiên bản CSS3 đã hỗ trợ thuộc tính sticky này nhưng hoạt động đôi lúc không như ý muốn. Bài viết này tôi giới thiệu với các bạn thành phần sticky của bộ thư viện UIkit giúp các bạn thiết kế nhanh thành phần sticky chỉ với vài khai báo thuộc tính HTML đơn giản.

Để sử dụng thành phần sticky của thư viện UIkit, các bạn cần phải tích hợp UIkit bằng cách tải bộ thư viện về tại địa chỉ https://github.com/uikit/uikit và tích hợp vào website với nội dung mã lệnh HTML như sau:
HTML:
<link href="path/to/uikit.min.css" rel="stylesheet">
<script src="path/to/uikit.min.js"></script>
Tiếp theo, các bạn thiết kế thành phần các bạn muốn tích hợp chức năng sticky và khai báo thêm thuộc tính HTML cho thành phần đó như ví dụ sau:
HTML:
<header uk-sticky></header>
Với khai báo như ví dụ trên, các bạn sẽ có thành phần header được giữ lại phía trên cùng trình duyệt web. Các bạn có thể thay đổi cách thức hoạt động của sticky hoặc hiệu ứng chuyển động bằng cách khai báo các tuỳ chọn. Để biết thêm các tuỳ chọn của sticky trong bộ thư viện UIkit, các bạn tham khảo tại địa chỉ https://getuikit.com/docs/sticky.
 
Top