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. Điều này có lợi ích là cho độc giả theo dõi được nội dung đó chi tiết hơn. Demo thì xem ngay tại trang Bác Sĩ Windows này nhé.
Bước 2. Copy đoạn code sau và dán vào trước thẻ
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.
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.
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});
Đăng nhận xét
Chào mừng bạn đã đến với blog nhật ký!