VeoSpot Designer - Blog hướng dẫn thiết kế website trong 7 ngày, website bán hàng, website giới thiệu công ty
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)
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 !
