Sticky Widget - Thủ thuật cố định Widget khi cuộn trang sử dụng JS cho Blogspot

Chào các bạn, nếu blog của bạn show nhiều bài viết ra trang chủ, dẫn đến chiều cao của trang khá nhiều, vì vậy khi cuộn trang thì bên phần #sidebar của blog khá là trống vắng nếu như không có các widget khác lắp vào chỗ đó.

Sticky Widget - Thủ thuật cố định Widget khi cuộn trang sử dụng JS cho Blogspot. Ảnh: davetsizhayat.com

Thế nên việc cố định 1 widget khi cuộn trang là khá cần thiết trong trường hợp này. Bài viết này mình sẽ hướng dẫn các bạn dùng javascript để cố định 1 widget lại luôn trượt theo khi bạn cuộn trang.

Cách thực hiện

Bước 1. Đăng nhập vào giao diện chỉnh sửa HTML Blogger.
Bước 2. Dán đoạn code bên dưới vào trước thẻ </body> trong template.
<script>
/*<![CDATA[*/
! function(t) {
    var e = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: "is-sticky",
            center: !1
        },
        i = t(window),
        n = t(document),
        s = [],
        c = i.height(),
        a = function() {
            for (var t = i.scrollTop(), e = n.height(), a = e - c, o = t > a ? a - t : 0, r = 0; r < s.length; r++) {
                var p = s[r],
                    l = p.stickyWrapper.offset().top,
                    d = l - p.topSpacing - o;
                if (d >= t) null !== p.currentTop && (p.stickyElement.css("position", "").css("top", "").removeClass(p.className), p.currentTop = null);
                else {
                    var h = e - p.elementHeight - p.topSpacing - p.bottomSpacing - t - o;
                    0 > h ? h += p.topSpacing : h = p.topSpacing, p.currentTop != h && (p.stickyElement.css("position", "fixed").css("top", h).addClass(p.className), p.currentTop = h)
                }
            }
        },
        o = function() {
            c = i.height()
        };
    window.addEventListener ? (window.addEventListener("scroll", a, !1), window.addEventListener("resize", o, !1)) : window.attachEvent && (window.attachEvent("onscroll", a), window.attachEvent("onresize", o)), t.fn.sticky = function(i) {
        var n = t.extend(e, i);
        return this.each(function() {
            var e = t(this);
            if (n.center) var i = "margin-left:auto;margin-right:auto;";
            stickyId = e.attr("id"), e.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + i + '"></div>').css("width", e.width());
            var c = e.outerHeight(),
                a = e.parent();
            a.css("widthd", e.outerWidth()).css("heightt", c).css("clear", e.css("clear")), s.push({
                topSpacing: n.topSpacing,
                bottomSpacing: n.bottomSpacing,
                stickyElement: e,
                currentTop: null,
                stickyWrapper: a,
                elementHeight: c,
                className: n.className
            })
        })
    }
}(jQuery);
// bacsiwindows
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
     $("#PopularPosts1").sticky({topSpacing:10,bottomSpacing:400});
   });
 </script>
Bước 3. Lưu mẫu và tùy chỉnh.
  • Thay #PopularPosts1 thành ID của Widget mà bạn muốn áp dụng.
  • topSpacing là khoảng cách tính từ trên xuống khi cuộn.
  • bottomSpacing là khoảng cách tính từ chân trang lên đến widget, khi chạm đến mốc mà bạn thiết lập thì widget sẽ ngừng không cuộn nữa.
Chúc bạn thành công, có thắc mắc cứ bình luận bên dưới sẽ được giải đáp.
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. cố định cả 2 Widget được ko nhỉ?

      Trả lờiXóa
      Trả lời
      1. Muốn cố định bao nhiêu widget thì thêm bây nhiêu dòng, ví dụ:

        $("#PopularPosts1").sticky({topSpacing:10,bottomSpacing:400});
        $("#HTML2").sticky({topSpacing:10,bottomSpacing:400});
        $("#HTML3").sticky({topSpacing:10,bottomSpacing:400});

        Xóa
    2. sử dụng lên class đc ko a nhỉ? nếu dùng lên class thì gì vậy a?

      Trả lờiXóa