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.
 |
| Code Cố Định Thanh SIDEBAR Trên Website Blog Veowix |
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'>$("#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 !
