Hướng dẫn cách tạo một widget thanh bên cố định khi cuộn trang cho blogger

Vị trí của side bar ở bên mà các bạn muốn tạo cố định

Thỉnh thoảng các bạn bắt gặp những blog có cái widget ở thanh bên cố định khi cuộn trang xuống phía dưới rất lạ và các bạn cũng muốn thử áp dụng vào trang blog của mình xem sao mà không biết phải làm như thế nào

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>

Copy

<!-- 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(){    $(&quot;#HTML5&quot;).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