Chia sẻ code sticky sidebar widget scroll jquery chạy ổn định, dễ cài đặt và tùy chỉnh

Sticky sidebar widget scroll được hiểu khi bạn muốn cố định một widget nào đó trong sidebar khi scroll thanh cuộn trang lên xuống, khi bạn kéo thanh cuộn xuống widget sẽ cố định đến chân trang. Có một số code về sticky sidebar widget scroll nhưng mình thấy code này ổn định nhất lại dễ cài đặt, các bạn tham khảo chèn vào mẫu template của mình.

Vì là code jquery cho nên template cần chèn link jquery trước thẻ đóng , các bạn kiểm tra nếu template mình chưa có thì chèn link sau:

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Code sticky sidebar widget scroll jquery chèn trước thẻ đóng </body>

Copy

<b:if cond='data:view.isPost and !data:blog.isMobileRequest'> // Điều kiện cho trang và không load trên mobile
<script>//<![CDATA[
$(window).on('load', function() {
  var mq = window.matchMedia('(min-width: 800px)') // Điều kiện chỉ load với kích thước màn hình 800px trở lên
  if (mq.matches) {
    (function(a, b) {
      a.extend({
        stickysidebarscroll: function(c, e) {
          if (e && e.offset) {
            e.offset.bottom = parseInt(e.offset.bottom, 10);
            e.offset.top = parseInt(e.offset.top, 10)
          } else {
            e.offset = {
              bottom: 100,
              top: 0
            }
          }
          var c = a(c);
          if (c && c.offset()) {
            var j = c.offset().top,
              q = c.offset().left,
              o = c.outerHeight(true),
              k = c.outerWidth(),
              h = c.css("position"),
              g = c.css("top"),
              f = parseInt(c.css("marginTop"), 10),
              n = a(document).height(),
              l = a(document).height() - e.offset.bottom,
              m = 0,
              d = false,
              i = false,
              p = false;
            if (e.forcemargin === true || navigator.userAgent.match(/\bMSIE (4|5|6)\./) || navigator.userAgent.match(/\bOS (3|4|5|6)_/) || navigator.userAgent.match(/\bAndroid (1|2|3|4)\./i)) {
              p = true
            }
            a(window).bind("scroll resize orientationchange load", c, function(t) {
              if (n !== a(document).height()) {
                l = a(document).height() - e.offset.bottom;
                n = a(document).height()
              }
              if (i == false) {
                j = c.offset().top
              }
              var s = c.outerHeight(),
                r = a(window).scrollTop();
              if (p && document.activeElement && document.activeElement.nodeName === "INPUT") {
                return
              }
              i = true;
              if (r >= (j - (f ? f : 0) - e.offset.top)) {
                if (l < (r + s + f + e.offset.top)) {
                  m = (r + s + f + e.offset.top) - l
                } else {
                  m = 0
                }
                if (p) {
                  c.css({
                    marginTop: parseInt(((f ? f : 0) + (r - j - m) + 2 * e.offset.top), 10) + "px"
                  })
                } else {
                  c.css({
                    position: "fixed",
                    top: (e.offset.top - m) + "px",
                    width: k + "px"
                  })
                }
              } else {
                i = false;
                q = c.offset().left;
                c.css({
                  position: h,
                  top: g,
                  left: q,
                  width: k + "px",
                  marginTop: (f ? f : 0) + "px"
                })
              }
            })
          }
        }
      })
    })(jQuery)
    $.stickysidebarscroll("#id", { // id của widget
      offset: {
        top: 0, // Cố định đầu trang
        bottom: 185 // Cố định chân trang
      }
    })
  }
})
//]]></script>
</b:if>

Sử dụng điều kiện

• data:view.isHomepage: Trang chủ
• data:view.search.label: Trang tìm kiếm theo Label
• data:view.search.query: Trang tìm kiếm kết quả
• data:view.isArchive: Trang lưu trữ
• data:view.isMultipleItems: Bao gồm tất cả các trang tìm kiếm, trang chủ, trang lưu trữ
• data:view.isPost: Trang bài viết
• data:view.isPage: Trang tĩnh
• data:view.isSingleItem: bao gồm trang bài viết và trang tĩnh
• data:blog.isMobileRequest: Yêu cầu chỉ tải trang trên mobile hay ?m=1 sau liên kết

Thêm (!) đằng trước điều kiển để hiểu không tải trang đó ví dụ <b:if cond='!data:view.isPost'> không tải với trang bài viết

• window.matchMedia('(min-width: 800px)') tùy thuộc vào reponsive của mỗi theme mà đặt kích thước chính xác ví dụ khi màn hình kích thước 800px thì sidebar rộng 100% và nằm bên dưới main thay vì nằm bên phải hoặc bên trái

Cố định đầu trang và chân trang

• top: 0 độ cao tính từ đầu trang đến đỉnh đầu widget, tùy thuộc vào menu có cố định hay không nếu menu cố định fixed mà có độ cao 50px thì thay top: 50
• bottom: 185 độ cao tính từ chân chang lên chân widget

Các bạn để lại nhận xét bên dưới nếu không cài đặt được, mình sẽ phản hồi đến bạn trong thời gian sớm nhất.

• Tweet
• Share
• Share
• Share
• Share