![]() |
Vị trí của side bar ở bên mà các bạn muốn tạo cố định |
Hôm nay mình sẽ hướng dẫn một demo tạo một widget thanh bên cố định khi cuộn trang cho blogger với 3 bước đơn giản sau. Các bạn chỉ cần làm lần lượt từng bước một là được thôi nhé không có gì khó lắm đâu nhé
1. Xác định chính xác widget thanh bên mà bạn muốn chèn
Bằng cách vào bố cục layout của blog rồi mở một wiget thanh bên ra để xem tên của widget mà bạn muốn chèn
2. Copy đoạn code bên dưới rồi chèn vào trước thẻ đóng </body>
<!-- sticky widget --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><script>/*<![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'> $(document).ready(function(){ $("#HTML5").sticky({topSpacing:0,bottomSpacing:500,}); }); </script> }); </script> }); </script>Sau khi chèn xong sẽ giống như hình dưới nhé
3. Thay tên widget mà các bạn tìm được ở bước 1 vào đoạn code trên
Ví dụ các bạn tìm được tên của widget là HTML1 như ở bước 1 ở trên. Lúc này bạn chỉ cần thế vào đoạn HTML5 ở đoạn code trên là xong thôi
Đến đây thì các bạn chỉ việc lưu lại và kiểm tra kết quả mà mình vừa tạo ra nhé. Chúc các bạn làm thành công một widget thanh bên cố định thật đẹp
Đã cài vào blog..trông chuyên nghiệp hẵn nhỉ :)))
Trả lờiXóa