Cố định sidebar khi scroll chuột xuống dưới


<script type=”text/javascript” src=”./js/sticky-sidebar.js”></script>



Đoạn Script hiển thị:


<script type=”text/javascript”> var sidebar = new StickySidebar(‘#sidebar’, {
containerSelector: ‘#main-content’,
innerWrapperSelector: ‘.sidebar__inner’,
topSpacing: 20, bottomSpacing: 20 });
</script>

topSpacing: 20 (tính bằng px) – khoảng cách trên cùng giữa mục Sticker và Header.
bottomSpacing: 20 (tính bằng px) – khoảng cách dưới cùng giữa mục Sticker và Footer.

Tiến hàng thực hiện

Cấu trúc HTML của trang web của bạn phải tương tự như vậy để hoạt động:


<div id=”main-content” class=”main”>
<div id=”sidebar” class=”sidebar”>
<div class=”sidebar__inner”>
<p>Content goes here</p>
</div>
</div>
<div id=”content” class=”content”>
<p>Content goes here</p>
</div>
</div>

=> các bạn có thể thay đổi các tên các class tùy theo website của bạn đang sử dụng.

Lưu ý: Lớp sidebar__inner là class bạn muốn cố định, #main-content là lớp bao bên ngoài cùng.

Ví dụ trên, bạn có thể sử dụng JavaScript sau:


<script type=”text/javascript” src=”./js/sticky-sidebar.js”></script>
<script type=”text/javascript”>
var sidebar = new StickySidebar(‘#sidebar’, {
containerSelector: ‘#main-content’,
innerWrapperSelector: ‘.sidebar__inner’,
topSpacing: 20,
bottomSpacing: 20
});
</script>


ok. Chúc các bạn thành công !