Chia sẻ code sticky sidebar widget scroll jquery chạy ổn định, dễ cài đặt và tùy chỉnh
vào
16 thg 10, 2018
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:
Code sticky sidebar widget scroll jquery chèn trước thẻ đóng </body>
Sử dụng điều kiện
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
- 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
- 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
Nội dung chính
