Code Blogspot Lập Trình & Seo Lập trình Wordpress Wordpress 

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!
Download file
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


thiết bị phòng chụp | bán chân đèn flash | bán đèn chụp ngoại cảnh | bán đèn quay phim | bán đèn chụp sản phẩm | remote trigger godox | đèn flash canon speedlite | đèn led chụp hình sản phẩm | bóng đèn flash | túi đựng máy ảnh | phụ kiện máy ảnh | bàn chụp sản phẩm | thiết bị chống rung máy quay phim | máy ép PLASTIC | thang chụp hình | máy chụp hình sản phẩm | máy in ảnh hiti | chân máy ảnh chụp hình | pin sạc máy ảnh | máy đo sáng | tủ chống ẩm máy quay phim | bán đèn flash | đèn flash hylow | Đèn Flash studio | đèn flash Jinbei | đèn flash photon | bộ kít đèn flash Jinbei | bộ kít đèn flash | Chân máy ảnh | setup phòng chụp sản phẩm | softbox | tấm hắt sáng | bán chân đèn studio | dàn treo đèn | chóa đèn tổ ong | phông nền 3d | dù chụp hình | giá treo phông chụp hình | thanh trượt dolly | tay cầm máy quay phim | phông chụp hình 3d | phòng chụp đám cưới |

Leave a Comment