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

Quản trị viên tháng 9 19, 2018 #Javascript #Thủ Thuật Blogspot #Widget

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.

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.

Bình luận

Chia sẻ

Bài Liên Quan Tác Giả

Huỳnh Phụng Blogger

Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được