Cách làm cho một widget trượt theo khi cuộn trang (Sticky Widget) Blogger Blogspot

#Thủ Thuật #Windows #Blogger #Facebook

Cách làm cho một widget trượt theo khi cuộn trang (Sticky Widget) Blogger Blogspot

Share:
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. Tức là khi bạn cuộn chuột đến đâu thì widget đó vẫn sẽ hiện trên màn hình chứ không ẩn đi.
Thủ thuật này rất phù hợp đối với những widget quảng cáo hay widget đăng ký qua email,... vì nó sẽ luôn dính trên màn hình giúp người xem có thể theo dõi nó bất cứ khi nào mà không phải trượt lên lại phía trên.
Chỉ với đoạn javascript dưới đây, bạn có thể tạo cho mình một widget cố định (sticky widget) khi cuộn trang rồi! Áp dụng vào menu vẫn được nhé!

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});
Source code: lụm ở đâu quên rồi :v
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.