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

Đăng nhận xét

3 Nhận xét

  1. cảm ơn bạn, bài viết rất hữu ích.

    Trả lờiXóa
  2. Chào bạn. Cảm ơn bài viết rất hay của bạn. Mình làm theo như trên, nhưng khi kéo xuống chỉ cố định được các chữ của thanh menu. Còn khung và màu nền của thanh menu thì mất. Bạn chỉ giúp mình cách khắc phục nhé

    Trả lờiXóa
    Trả lời
    1. Nếu menu của bạn nó nằm trong một khung khác thì bạn chỉ kéo được cái chữ xuống thôi còn phần nền và khung sẽ không theo được.

      Xóa