Cách làm cho một widget trượt theo khi cuộn trang (Sticky Widget) Blogger Blogspot
Chào các bạn, theo như yêu cầu của một bạn inbox nhờ mình chia sẻ cách làm cho một widget bất kì trượt theo khi bạn cuộn trang. Tức là khi bạn cuộn chuột đến đâu thì widget đó vẫn sẽ hiện trên màn hình chứ không ẩn đi.
Thủ thuật này rất phù hợp đối với những widget quảng cáo hay widget đăng ký qua email,… vì nó sẽ luôn dính trên màn hình giúp người xem có thể theo dõi nó bất cứ khi nào mà không phải trượt lên lại phía trên.
Chỉ với đoạn javascript dưới đây, bạn có thể tạo cho mình một widget cố định (sticky widget) khi cuộn trang rồi! Áp dụng vào menu vẫn được nhé!
CÁC BƯỚC THỰC HIỆN
Bước 1. Đăng nhập Blogger ➔ Chủ đề ➔ Chỉnh sửa HTML.
Bước 2. Copy đoạn code sau và dán vào trước thẻ </head> trong template.
<script>
//<![CDATA[
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: ‘is-sticky’,
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight – windowHeight,
extra = (scrollTop > dwh) ? dwh – scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop – s.topSpacing – extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css(‘position’, ”).css(‘top’, ”).removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight – s.elementHeight – s.topSpacing – s.bottomSpacing – scrollTop – extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css(‘position’, ‘fixed’).css(‘top’, newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener(‘scroll’, scroller, false);
window.addEventListener(‘resize’, resizer, false);
} else if (window.attachEvent) {
window.attachEvent(‘onscroll’, scroller);
window.attachEvent(‘onresize’, resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = “margin:auto;”;
stickyId = stickyElement.attr(‘id’);
stickyElement
.wrapAll(‘<div id=”‘ + stickyId + ‘StickyWrapper” style=”‘ + centerElement + ‘”></div>’)
.css(‘width’, stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css(‘width’, stickyElement.outerWidth())
.css(‘height’, elementHeight)
.css(‘clear’, stickyElement.css(‘clear’));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>
<script type=’text/javascript’>
$(document).ready(function(){
$("#PopularPosts1").sticky({topSpacing:10,bottomSpacing:535});
});
</script>
CHỈNH SỬA
- Thay #PopularPosts1 thành ID của widget mà bạn muốn nó trượt.
- topSpacing:10 là khoảng cách tính từ đầu trang xuống tới phía trên của widget.
- bottomSpacing:535 là khoảng cách tính từ chân trang lên đến phía dưới của widget.
Bước 3. Lưu chủ đề (mẫu).
Nếu bạn muốn nhiều widget cùng trượt một lúc thì chỉ cần thêm đoạn sau vào trước dấu }); là được.
$("#ID").sticky({topSpacing:10,bottomSpacing:535});