jQuery lockfixed, đóng đinh phần tử web khi scroll

Có nhiều cách để đóng đinh (sticky) một phần tử web khi scroll, hôm nay MyLớp.edu.vn 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

View Demo   Download Files

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

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:

HTML Code:
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:

JavaScript Code:
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:

JavaScript Code:
1
2
3
$(document).ready(function () {
	$.lockfixed("#sidebar", {offset: {top: 20, bottom: 470} });
});

Trong đó,

#sidebar: là phần tử muốn điều khiển

top: tọa độ fixed phía trên của phần tử đóng đinh (so với top của trình duyệt) khi người dùng cuộn xuống.

bottom: tọa độ fixed đáy của phần tử (so với bottom của trình duyệt) khi phần tử chạm đáy phần tử cha khi người dùng cuộn xuống dưới cùng trang web (Thường là với các trang có footer dài)

Trong VD này, footer dài 450px, #sidabar cách footer 20px nên giá trị cách đáy của trình duyệt là 470px.

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

jQuery lockfixed plugin

– fix sidebar while scrolling, sticky sidebar,…

Cheers,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website