Code sticky blogspot sidebar do mình sưu tầm trước kia và một cái mới do anh Tuấn chia sẻ khá hay. Gửi tới các bạn.
Điều kiện là phải có jquery trước thẻ đóng </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Code số 1- do anh Tuấn chia sẻ
Code Sticky blogspot sidebar này mới nhất hiện nay 2018, 2019. Đây là code hay và chuẩn.
<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 – fixed header
bottom: 185 // Cố định chân trang – fixed bottom
}
})
}
})
//]]></script>
</b:if>
Code:
<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>
Code 2 – do mình sưu tầm trước kia
Code Sticky blogspot sidebar này thì bạn phải thêm 1 thuộc tính disable (display:none) nó trên màn hình 800 trở xuống. Như cua mình là:
@media all and (max-width:1020px){#HTML6{display:none}}<script>
var $stickyHeight = 100; // chiều cao của banner quảng cáo
var $padding = 5; // khoảng cách top của banner khi dính
var $topOffset = 1280; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )
var $footerHeight = 300; // Định vị điểm dừng của banner, tính từ chân lên
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $(‘#sticky’).offset();
if($(document).height() – $footerHeight – $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() – $stickyHeight – $footerHeight – $padding – 185;
$(‘#sticky’).attr(‘style’, ‘position:absolute; top:’+$top+’px;’);
}else if($(window).scrollTop() + $padding > $topOffset) {
$(‘#sticky’).attr(‘style’, ‘position:fixed; top:’+$padding+’px;’);
}else{
$(‘#sticky’).attr(‘style’, ‘position:relative;’);
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>
<div id=”sticky”>
…code here…
</div>
Mã code:
<script>
var $stickyHeight = 100; // chiều cao của banner quảng cáo
var $padding = 5; // khoảng cách top của banner khi dính
var $topOffset = 1280; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )
var $footerHeight = 300; // Định vị điểm dừng của banner, tính từ chân lên
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;
$('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');
}else if($(window).scrollTop() + $padding > $topOffset) {
$('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');
}else{
$('#sticky').attr('style', 'position:relative;');
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>
<div id="sticky">
... code- here
</div> Chú ý: Nội dung trong các bài viết chỉ có tính chất tham khảo. Độc giả vui lòng tham khảo ý kiến của bác sĩ trước bất cứ áp dụng nào! Vui lòng liên hệ để gỡ bài nếu bạn thấy sai và không đúng! Blog xin chân thành cảm ơn!