Liên hệ quảng cáo
Liên hệ quảng cáo
profile card

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

Cập nhật: 29/04/2019 Bởi Duy... - A- A+

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 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.

@ngylduy, @688.in, @ngylduy, @ngylduy

Ngày ấy ɐnh ngỏ lời thương và yêu đậm sâu với ǝm, ǝm có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.
Nếu ngày ấy ɐnh là chàng trai mà ǝm ngày đêm ước ao, ..., thì giờ đây ɐnh đã có câu chuyện thật đẹp...

Tết Trung Thu rước đèn đi chơi em rước đèn đi khắp phố phường, lòng vui sướng với đèn trong tay em múa ca trong ánh trăng rằm. Trung thu là Tết thiếu nhi, mà sao người lớn cứ đi chơi nhiều đi nhiều nó lại làm liều, làm liều nó lại ra nhiều thiếu nhi.
Niệm StyleLớp Thủ Thuật123 ShareNhái BlogBlog VNITNgọc Ánh BlogMinh ĐứcHuyDC BlogBảo Trọng BlogLong An IT
Chong chóng

Subscribe to our Newsletter