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.

Chia sẻ code sticky sidebar widget scroll jquery chạy ổn định, dễ cài đặt và tùy chỉ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.

2
Hãy để lại một câu trả lời bạn muốn

avatar
250
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Quang ThắngViệt Blogger Recent comment authors
  Subscribe  
Mới nhất Lâu đời nhất
Thông báo
Quang Thắng
Khách

Xong rồi áp dụng vào widget thế nào ad?

Việt Blogger
Khách

Em thay #id bằng id của widget ví dụ #HTML1, #PopularPosts1…

Scroll to top
0353.456.495