Hiện tại có rất nhiều cách để làm cho website của chúng ta nhìn ngầu và chuyên nghiệp hơn trong mắt người dùng. Nhiều người thì trang trí cho blog mình có một vẻ ngoài bắt mắt, người thì thêm những hiệu ứng bá đạo khác lạ gây hứng thú cho người dùng. Những việc làm tưởng chừng nho nhỏ này có tác động không hề nhỏ đến thiện cảm của người dùng đối với website của chúng ta, và nếu bạn bỏ lỡ qua điều này thì đang khiến bạn bỏ lỡ cơ hội để tạo dựng lượng khách cố định mà mọi blogger đều mong muốn.
Cũng cùng lý do này, lẩn quẩn tìm quanh trên mạng mình tìm thấy đoạn jQuery giúp cho một thứ bất kì trượt theo khung màn hình, và mình quyết định viết bài hướng dẫn xài nó với Blogger cho mọi người.
Làm cho widget trượt theo khung màn hình cho Blogger
Đăng nhập vào trang tổng quan của blog mà bạn muốn thêm vào hiệu ứng
Tại trang tổng quan » Mẫu » Chỉnh sửa HTML
Ở đây bạn tìm đến thể
</body> và chèn đoạn mã này lên trên
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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-left:auto;margin-right: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(){
$("#HTML5").sticky({topSpacing:0});
});
</script>
việc đơn giản của đoạn jQuery này là sẽ làm cho những phần tử mà bạn mong muốn ở trên trang trượt theo khi màn hình qua khu vực của nó. Ở đây bạn thay thế
HTML5 bằng id mà widget bạn muốn nó trượt theo khung màn hình, và
topSpacing bằng khoảng cách giữ widget đó với cạnh trên của màn hình rồi lưu lại.
Lời kết
Ngoài việc tăng thiên cảm với người đùng thì đây là một trong những jQuery rất hay nếu bạn có những bài viết chất lượng, với widget chạy dọc thân trang bạn có thể treo những thứ bạn muốn khách chú ý đến như quảng cáo, liên hệ, v.v.. từ đó thì tăng doanh thu hoặc như lợi ích nào đó cho bản thân của bạn.
Belum ada tanggapan untuk "Làm cho widget trượt theo màn hình cho Blogger"
Post a Comment