Có nhiều cách để đóng đinh (sticky) một phần tử web khi scroll, hôm nay MyLop.BanMai.Info sẽ giới thiệu tới các bạn một jQuery plugin để làm việc này một cách đơn giản, ngắn gọn nhất, đó là sử dụng “jQuery lockfixed” của Yvo Schaap, giúp ta có thể đóng đinh bất kỳ phần tử web nào cũng được, thậm trí bạn sẽ không phải viết một đoạn CSS nào!
“jQuery lockfixed”, allow elements to stick within viewport when scrolling, là một jQuery plugin cực nhẹ, chỉ có 2K thôi nhé!
jQuery lockfixed, đóng đinh phần tử web khi scroll
Trong bài hướng dẫn này, chúng ta sẽ đóng đinh sidebar bên phải trang web nhé. Hiệu ứng đóng đinh được mô tả một cách trực quan như hình dưới đây:
Fixing a sidebar while scrolling, until bottom with jquery
Bước 1) Tạo phần tử muốn đóng đinh trong HTML và chỉnh sửa trong CSS tùy ý bạn, VD:
1 2 3 4 | <div id="sidebar"> <h3>Sidebar</h3> <p>Sidebar Content</p> </div> |
Bước 2) Link tới thư viện jQuery trong phần <head> của mã nguồn web:
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
Bước 3) Viết code jQuery điều khiển phẩn tử muốn đóng đinh trong sự kiện ready:
1 2 3 | $(document).ready(function () { $.lockfixed("#sidebar", {offset: {top: 20, bottom: 470} }); }); |
Trong đó,
–
–
–
Trong VD này,
Vậy là xong, code rất đơn giản đúng không các bạn! Chúc bạn thành công nhé!
Tham khảo, từ khóa để tìm kiếm:
– Fixing a sidebar while scrolling, until bottom with jquery
– fix sidebar while scrolling, sticky sidebar,…
Cheers,
Lục Đức Thành
Latest posts by Lục Đức Thành (see all)
- Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
- Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
- WordPress 5 có gì mới? - 23/12/2018
- Sublime Text 3 Portable Windows 64 bit - 11/12/2017
- Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017