[Sticky Widget] Cố định tiện ích khi cuộn trang blogspot

Đăng Ngày: 10/20/2016

Đỗ Mạnh Hồng

Sticky Widget là một thủ thuật cố định một widget (tiện ích) khi cuộn trang giúp tăng tỉ lệ click cho blogspot hay website rất hiệu quả vì đây là tiện ích có tính chất gây sự chú ý cực kỳ cao.

Vậy chúng ta bắt đầu tìm hiểu cách cố định tiện ích khi cuộn trang trên blogspot nhé

Bước 1 : Mẫu > Chỉnh sửa HTML thêm đoạn code sau trên </body>

<script type='text/javascript'> $(document).ready(function(){$("#HTML1").sticky({topSpacing:0,bottomSpacing:200})}); </script> <script type='text/javascript'> /*<![CDATA[*/ function downloadJSAtOnload(){var e=document.createElement("script");e.src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js";document.body.appendChild(e)}if(window.addEventListener)window.addEventListener("load",downloadJSAtOnload,false);else if(window.attachEvent)window.attachEvent("onload",downloadJSAtOnload);else window.onload=downloadJSAtOnload; (function($){var e={topSpacing:0,bottomSpacing:0,className:'is-sticky',center:false},$window=$(window),$document=$(document),sticked=[],windowHeight=$window.height(),scroller=function(){var a=$window.scrollTop(),documentHeight=$document.height(),dwh=documentHeight-windowHeight,extra=(a>dwh)?dwh-a:0;for(var i=0;i<sticked.length;i++){var s=sticked[i],elementTop=s.stickyWrapper.offset().top,etse=elementTop-s.topSpacing-extra;if(a<=etse){if(s.currentTop!==null){s.stickyElement.css('position','').css('top','').removeClass(s.className);s.currentTop=null}}else{var b=documentHeight-s.elementHeight-s.topSpacing-s.bottomSpacing-a-extra;if(b<0){b=b+s.topSpacing}else{b=s.topSpacing}if(s.currentTop!=b){s.stickyElement.css('position','fixed').css('top',b).addClass(s.className);s.currentTop=b}}}},resizer=function(){windowHeight=$window.height()};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(d){var o=$.extend(e,d);return this.each(function(){var a=$(this);if(o.center)var b="margin-left:auto;margin-right:auto;";stickyId=a.attr('id');a.wrapAll('<div id="'+stickyId+'StickyWrapper" style="'+b+'"></div>').css('width',a.width());var c=a.outerHeight(),stickyWrapper=a.parent();stickyWrapper.css('width',a.outerWidth()).css('height',c).css('clear',a.css('clear'));sticked.push({topSpacing:o.topSpacing,bottomSpacing:o.bottomSpacing,stickyElement:a,currentTop:null,stickyWrapper:stickyWrapper,elementHeight:c,className:o.className})})}})(jQuery); /*]]>*/ </script> Trong đó các bạn chỉnh sửa HTML1 là tiện ích tùy chọn mà các bạn muốn cố định nhé Bước 2 :  Lưu mẫu lại và kiểm tra thành quả nhé Chúc bạn thành công ! Thủ thuật blogspot này quá đơn giản mà đúng không?