Code cố định Sidebar khi Scroll cuộn chuột lên xuống

Code cố định Sidebar khi Scroll cuộn chuột lên xuống đơn giản và 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, các bạn có thể cố định sidebar khi scroll, áp dụng cho mọi mã nguồn php, wordpress, blogspot, asp...

“jQuery lockfixed”, allow elements to stick within viewport when scrolling, là một jQuery plugin cực nhẹ để tích hợp vào website của bạn!

Trong bài hướng dẫn này, chúng ta sẽ cố định Sidebar khi Scroll cuộn chuột lên xuống bên phải trang web nhé. Các bạn có thể xem demo bên dưới đây:

Code cố định Sidebar khi Scroll cuộn chuột lên xuống

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

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

<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

$(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.

>> Code slide hình ảnh hoặc bài viết mới chạy ngang liên tục cho Blogspot
>> Code quảng cáo Popup under javascript ẩn đằng sau trình duyệt
>> Công cụ SEO từ khóa website tốt nhất dành cho dân SEO

Tags: