Cố định phần tử website như thế nào? Việc làm này tưởng chừng như đơn giản nhưng không phải cũng biết! Khi truy cập website chúng ta thường rất hay gặp những phần tử như banner quảng cáo, giỏ hàng, thanh tìm kiếm, sidebar,… khi cuộn chuột chúng sẽ cố định lại để thuận tiện hơn cho người dùng.

Có rất nhiều cách để cố định phần tử khi cuộn chuột, hôm nay mình sẽ giới thiệu cho bạn một Jquery Plugin để làm việc này đơn giản và ngắn gọn đó là “Jquery lockfixed” của Yvo Schaap.

Hướng dẫn cố định phần tử website khi cuộn chuột

Trong bài hướng dẫn này, mình sẽ đóng đinh phần tử sidebar bên phải trang web nhé. Hình bên dưới mô tả một cách trực quan việc đóng đinh 1 sidebar.

Bước 1: Xác định phần tử muốn đóng đinh

<div id="sidebar">
	<h3>Sidebar</h3>
	<p>This Is Sidebar Content</p>
</div>

Bước 2: Kiểm tra mã nguồn của bạn đã có thư viện Jquery chưa, nếu chưa có hãy chèn dòng code dưới đây trong phần <head> của mã nguồn web.

<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 cố định.

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

Chú thích:

  • #sidebar: là phần tử muốn cố định
  • top: tọa độ fixed phía trên của phần tử cố định ( so với top của trình duyệt) khi người dùng cuộn chuột xuống.
  • bottom: tọa độ fixed phía dưới của phần tử cố định

Hãy lưu file và xem thành quả của bạn đi! Mong rằng qua bài viết này bạn không còn trở ngại nào khi thiết kế website wordpress nữa.

Thật dễ phải không nào, nếu có khó khăn gì hãy comment ở phía dưới mình sẽ giúp đỡ các bạn. Chúc các bạn thành công!

5/5 - (19 bình chọn)