Cài đặt tiện ích Sidebar trượt theo blog

Ở bài viết này mình xin chia sẻ lại với các bạn một thủ thuật rất hay và tiện lợi, Cài đặt tiện ích Sidebar trượt theo blog.
Tiện ích có thể thay đổi khoảng cần trượt và trượt đến đâu thì dừng lại, chắc hẳn các bạn cũng đã từng thấy rất nhiều rồi. Xem thêm một tiện ích khác tương tự  Cài đặt menu và tiện ích trượt theo blog.

Hướng dẫn cài đặt tiện ích Sidebar trượt theo blog

1. Đăng nhập Blogger > Chọn Mẫu > Chỉnh sửa HTML > Thêm mã dưới đấy trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Thay thế "#sticky-sidebar" bằng một ID cần trượt
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Khoảng cách dừng lại "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Lưu ý: Thay phần được đánh dấu phía trên thành #ID tương ứng với blog của bạn

#sticky-sidebar : ID bắt đầu thực hiện trượt
#footer-wrapper : Trượt đến #ID này là sẽ kết thúc không trượt nữa

Thêm chiều rộng nội dung với CSS. VD ở đây điền mẫu là 300px chểu rộng, Ví dụ :

#sticky-sidebar{width:100%;max-width:300px}

Hoặc

#HTML1{width:100%;max-width:300px}

Hoặc xác định chiều rộng bằng cách như sau, ví dụ :

@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Các bạn xem DEMO phía bên dưới :

Demo tất cả phần sidebar đều trượt

DEMO 1

DEMO một widget cụ thể được trượt

DEMO 2

Rất đơn giản phải không ạ. Chúc các bạn thành công!

Nguồn: Arlinadzgn