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
Giày Cafe SHOEX
Hạ Khang Đường - Ổn định đường huyết
Saffron Extra White
Cốc Nguyệt San BEUCUP
Maxi White
Fysoline - Nước muối sinh lý dành cho bé sơ sinh và trẻ nhỏ
Mặt nạ thon mặt Vline
Finava - Tinh chất vàng sáng da, trị nám ngăn ngừa lão hoá
Trị Mụn Caryophy
Rong Nho Sabudo
Son YUMEISAKURA
Máy Khử Mùi MARKEL
Orlavi - Làm mờ sẹo
Dottorprimo - Trị các vết sẹo nặng
ZEN - Sản phẩm giúp hỗ trợ giảm căng thẳng
Nồi Chiên Không Dầu COSORI
Nồi Chiên Không Dầu LOTTE
Dưỡng Trắng RealWhite
Máy rửa mặt Pebble Lisa
Dầu Gội Nature Quen - Sao Thái Dương