Thêm hiệu ứng Sticky Widget trượt cố định trên Sidebar

Hi, hôm này mình xin chuyển chủ đề, viết một bài để hưỡng dẫn các bạn thêm một hiệu ứng nho nhỏ vào blog/website. Hiệu ứng Sticky Widget này sẽ giúp một ID hoặc Class trượt theo màn hình.





Có một số bạn chưa hiểu Sticky Widget là gì thì mình xin giải thích như sau:


Các Sticky Widget hiểu nôm na là đính cố định một widget bất kì mà chúng ta muốn trên một Sidebar, mỗi khi chúng ta kéo trang web xuống dưới hoặc lên trên, các widget này sẽ luôn xuất hiện và trượt dọc trên sidebar của blog.

Demo hiêu ứng Sticky Widget trên Website:

Hưỡng dẫn thêm hiệu ứng Sticky Widget cho Blog

Đơn giản lắm các bạn! Để tạo Sticky Widget, việc các bạn cần làm đó là làm theo hưỡng dẫn của mình.


Bước 1: Đăng nhập vào Dashboard Blogger


Bước 2: Chọn Mẫu » Chỉnh sửa HTML thêm đoạn code sau trước thẻ đóng </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">// <![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">// <![CDATA[
$(document).ready(function(){
 $("#widget").sticky({topSpacing:0});
 });

// ]]></script>

Bạn thay giá trị #widget cho đúng vùng mà bạn muốn nó trượt theo màn hình nhé. giá trị topSpacing là khoảng cách từ khoảng cách từ cạnh trên màn hình tới vùng bạn chọn.

Thêm hiệu ứng Sticky Widget cho Blog WordPress

Đơn giản nhất bạn có thể sử dụng plugin Q2W3 Fixed Widget mà không phải động chạm code như kiểu trên.

Sau khi cài đặt và kích hoạt thành công, các bạn vào Appearance » Widgets và click chọn widget mà bạn muốn làmSticky Widget rồi kéo sang sidebar mà bạn muốn.

Trong phần cài đặt Widget giờ sẽ có thêm một lựa chọn đó là “Fixed Widget”  ở cuối phần setting cua widget. Muốn Widget nào cố định thì các bạn chỉ cần click chọn vào ô “Fixed Widget” là được.

Ngoài việc cho phép tạo ra các Sticky Widget trên sidebar, plugin cũng hỗ trợ việc thiết lập Sticky Widget cho các vị trí khác nhau và hỗ trợ luôn cho cả các thiết bị di động nữa. Để có thể thiết lập vị trí Sticky Widget cũng như các thiết lập cho Mobile, cac bạn vào Appearance » Fixed Widget Options  để tiến hành cài đặt nhé!

THAM KHẢO THÊM CÁC SẢN PHẨM HOT NHẤT HIỆN NAY
Tổng hợp các sản phẩm cho mẹ và bé
Tổng hợp các sản phẩm làm đẹp
Tổng hợp các sản phẩm mỹ phẩm
Tổng hợp sản phẩm dung dịch nano bạc diệt khuẩn hot
Tổng hợp sản phẩm tăng giảm cân hot
Tổng hợp sản phẩm sinh lý nam nữ
Tổng hợp sản phẩm đặc trị