Chào các bạn, theo như yêu cầu của một bạn inbox nhờ mình chia sẻ cách làm cho một widget bất kì trượt theo khi bạn cuộn trang. Điều này có lợi ích là cho độc giả theo dõi được nội dung đó chi tiết hơn. Demo thì xem ngay tại trang Bác Sĩ Windows này nhé.
CÁCH LÀM CHO MỘT WIDGET BẤT KÌ TRƯỢT THEO BLOG KHI CUỘN TRANG

Các bước thực hiện
Bước 1. Đăng nhập Blogger ➔ Chủ đề ➔ Chỉnh sửa HTML.
Bước 2. Copy đoạn code sau và dán vào trước thẻ </head> trong template.
<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: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;#PopularPosts1&quot;).sticky({topSpacing:10,bottomSpacing:535});
   });
</script>

Chỉnh sửa

  • Thay #PopularPosts1 thành ID của widget mà bạn muốn nó trượt.
  • topSpacing:10 là khoảng cách tính từ đầu trang xuống tới phía trên của widget.
  • bottomSpacing:535 là khoảng cách tính từ chân trang lên đến phía dưới của widget.
Bước 3. Lưu chủ đề (mẫu).
Nếu bạn muốn nhiều widget cùng trượt một lúc thì chỉ cần thêm đoạn sau vào trước dấu }); là được.
$(&quot;#ID&quot;).sticky({topSpacing:10,bottomSpacing:535});

CHIA SẺ BÀI VIẾT

- - 11 bình luận
CHUYÊN MỤC

BÌNH LUẬN (11)

  1. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  2. Trả lời
    1. TUT Blogger chứ có phải TUT Facebook đâu mà fix :v

      Xóa
    2. Chứ e làm có đc đâu ?

      Xóa
    3. Em mời anh vào làm giúp em nha ♥

      Xóa
    4. Ừm, mời đi, để vào thử xem sao.

      Xóa
    5. Ok mời rồi đó anh. Sẵn tiện anh làm giúp em cột share của addthis nha ♥

      Xóa
    6. Set admin đi, anh chấp nhận rồi đấy.

      Xóa
    7. Ok rồi nha anh. Anh làm giúp em nhé :D

      Xóa
    8. Template chỉnh sửa nhiều quá nên bị xung đột rồi, thử nhiều cách khác trên mạng vẫn không thấy làm được, trong khi các template khác vẫn làm được.

      Xóa