Cố định widget khi cuộn trang
Với một bài viết dài ngoằn thì việc kéo xuống dưới sẽ làm cho sidebar của bạn trở nên trống hoác trông thật khó chịu. Bạn muốn cái gì đó che đậy đi phần trống bên hông đó thì tốt nhất đó là dùng mấy cái widget có sẵn trên blog của bạn. Lợi ích của việc cố định Widget khi cuộn trang:
- Làm đẹp cho blog của bạn khi đọc những bài viết dài
- Bạn có thể áp dụng cách này cho các quảng cáo (nếu có)
- Làm cho blog bạn trở nên chuyên nghiệp hơn.
Việc cố định một widget hết sức đơn gian mà bất cứ ai cũng có thể làm được mà không cần phải biết quá nhiều về code.
Bạn chỉ việc copy đoạn code dưới đây và đặt phía trên thẻ </body>
<!--[Start] cố định widget HTML2 khi cuộn trang-->
<script type='text/javascript'>
//<![CDATA[
(function(b){var c={topSpacing:0,bottomSpacing:0,className:"is-sticky",center:false},f=b(window),e=b(document),d=[],h=f.height(),a=function(){var j=f.scrollTop(),q=e.height(),p=q-h,l=(j>p)?p-j:0;for(var m=0;m<d.length;m++){var r=d[m],k=r.stickyWrapper.offset().top,n=k-r.topSpacing-l;if(j<=n){if(r.currentTop!==null){r.stickyElement.css("position","").css("top","").removeClass(r.className);r.currentTop=null}}else{var o=q-r.elementHeight-r.topSpacing-r.bottomSpacing-j-l;if(o<0){o=o+r.topSpacing}else{o=r.topSpacing}if(r.currentTop!=o){r.stickyElement.css("position","fixed").css("top",o).addClass(r.className);r.currentTop=o}}}},g=function(){h=f.height()};if(window.addEventListener){window.addEventListener("scroll",a,false);window.addEventListener("resize",g,false)}else{if(window.attachEvent){window.attachEvent("onscroll",a);window.attachEvent("onresize",g)}}b.fn.sticky=function(i){var j=b.extend(c,i);return this.each(function(){var l=b(this);if(j.center){var k="margin-left:auto;margin-right:auto;"}stickyId=l.attr("id");l.wrapAll('<div id="'+stickyId+'StickyWrapper" style="'+k+'"></div>').css("width",l.width());var m=l.outerHeight(),n=l.parent();n.css("width",l.outerWidth()).css("height",m).css("clear",l.css("clear"));d.push({topSpacing:j.topSpacing,bottomSpacing:j.bottomSpacing,stickyElement:l,currentTop:null,stickyWrapper:n,elementHeight:m,className:j.className})})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#Widget_ID").sticky({topSpacing:0,bottomSpacing:420});
});
</script>
<!--[Start] cố định widget HTML2 khi cuộn trang-->
Tùy chỉnh thông số:
- 420 là khoảng cách từ chân trang web đến widget của bạn.
- Widget_ID thay bằng widget ID của bạn. mà bạn muốn cố định
Cách lấy Widget ID:
Vào bố cục (layout) của blogs, tìm widget mà bạn muốn cố định rồi bấm vào chữ edit nằm trên nó. Tại thanh địa chỉ của cửa số widget vừa hiện ra, di chuyển con trỏ chuột đến cuối cùng thanh địa chỉ thể thấy được widget ID. Ví dụ trong hình là HTML2
