Cố định Sidebar với Theia Sticky Sidebar

Bố cục cơ bản của một web/blog thường gồm 2 phần, phần nội dung chính (main-wrapper) và phần sidebar (sidebar-wrapper). Thông thường sidebar sẽ thường ngắn hơn main nên nếu gặp phải bài có phần main dài, mỗi khi scroll chuột xuống ta sẽ cảm thấy rất trống trải. Trong bài viết này tôi sẽ hướng dẫn bạn cách Cố định Sidebar với Theia Sticky Sidebar
Xem demo

Ok rất dễ hiểu đúng không, tiện ích sẽ tính toán chiều chiều cao của main và sidebar để khi scroll vượt qua chiều cao của chúng, chúng sẽ được tạm thời giữ cố định lại để không bị hụt chiều cao so với thằng còn lại

Để tích hợp nó cũng vô cùng đơn giản.

Bước 1: Bạn tìm trong template của mình đoạn script nhúng jQuery và nhúng thêm script sau

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script> <!-- Must include jQuery -->

<script src='//cdn.jsdelivr.net/npm/theia-sticky-sidebar@1/dist/theia-sticky-sidebar.min.js' type='text/javascript'></script>

Bước 2: Xác định id/class của main, sidebar hoặc bất cứ thành phần nào bạn muốn sticky và chèn thêm script sau trước </body> (trong ví dụ này của tôi là #main-wrapper, #sidebar-wrapper)

<script type='text/javascript'>//<![CDATA[
$("#main-wrapper, #sidebar-wrapper").each(function() {
         $(this).theiaStickySidebar()
})
//]]>
</script>

Ngoài ra bạn có thể config thêm một số giá trị theo ý thích của mình. Truy cập https://github.com/WeCodePixels/theia-sticky-sidebar#settings để tìm hiểu thêm

Bước 3: Hết rồi :) lưu mẫu lại và kiểm tra thôi

Như vậy chúng ta đã thực hiện xong việc tích hợp Theia Sticky Sidebar vào website, dung lượng không quá lớn, ko thêm css, dễ cài đặt nhưng lợi ích nó mang lại không hề nhỏ. Nhất là khi bạn có những thứ giá trị bên sidebar

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !