Tổng hợp các Sticky blogspot sidebar

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.

Tổng hợp các Sticky blogspot sidebar
Tổng hợp các Sticky blogspot sidebar

Đ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>

Bài viết liên quan:

Đọc nhiều cùng chuyên mục:

Add Comment