Share Tạo sticky cho thanh sidebar với thư viện Sticky Sidebar

filiallion · 03/28/2019

Sticky một thành phần nào đó tức là ghim thành phần đó tại một vị trí cố định cho dù các thành phần khác trên website vẫn đang được cuộn theo thanh cuộn. Sticky thường áp dụng cho các thành phần thường xuyên tương tác như thanh trình đơn, các nút tác vụ hay một thông tin nào đó cần luôn luôn được hiển thị. Sidebar cũng là một thành phần thường được tạo sticky, và việc tạo sticky cũng rất đơn giản với việc sử dụng thư viện Sticky Sidebar.

Thư viện Sticky Sidebar có hai phiên bản, một phiên bản được phát triển dưới dạng một plugin của jQuery và một phiên bản phát triển độc lập. Các bạn có thể sử dụng một trong hai phiên bản tuỳ vào dự án của các bạn.

Các bạn có thể tải thư viện Sticky Sidebar tại địa chỉ https://github.com/abouolia/sticky-sidebar. Bài viết này tôi sẽ hướng dẫn các bạn tích hợp thư viện Sticky Sidebar dưới dạng một plugin của jQuery như sau:

HTML:

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.sticky-sidebar.min.js"></script>

Các bạn có thể tạo một thanh sidebar với nội dung mã lệnh HTML như sau:

HTML:

<div class="main">
    <div id="sticky-sidebar" class="sidebar">
        <div class="sidebar__inner">Sidebar content</div>
    </div>
    <div class="content">Content</div>
</div>

Bây giờ, các bạn cài đặt thư viện Sticky Sidebar cho thanh sidebar ở trên như sau:

JavaScript:

$(function() {
    $('#sticky-sidebar').stickySidebar({
        topSpacing: 60,
        bottomSpacing: 60
    });
});

Các bạn có thể tìm hiểu thêm về thư viện Sticky Sidebar tại địa chỉ https://github.com/abouolia/sticky-sidebar.

Share Tạo sticky cho thanh sidebar với thư viện Sticky Sidebar

filiallion

Administrator