LÀM CHO WIDGET TRƯỢT THEO MÀN HÌNH CHO BLOGGER

Hiện tại có rất nhiều cách để làm cho website của chúng ta nhìn ngầu và chuyên nghiệp hơn trong mắt người dùng. Nhiều người thì trang trí cho blog mình có một vẻ ngoài bắt mắt, người thì thêm những hiệu ứng bá đạo khác lạ gây hứng thú cho người dùng. Những việc làm tưởng chừng nho nhỏ này có tác động không hề nhỏ đến thiện cảm của người dùng đối với website của chúng ta, và nếu bạn bỏ lỡ qua điều này thì đang khiến bạn bỏ lỡ cơ hội để tạo dựng lượng khách cố định mà mọi blogger đều mong muốn.

Cũng cùng lý do này, lẩn quẩn tìm quanh trên mạng mình tìm thấy đoạn jQuery giúp cho một thứ bất kì trượt theo khung màn hình, và mình quyết định viết bài hướng dẫn xài nó với Blogger cho mọi người.

Làm cho widget trượt theo khung màn hình cho Blogger

Đăng nhập vào trang tổng quan của blog mà bạn muốn thêm vào hiệu ứng

Tại trang tổng quan » Mẫu » Chỉnh sửa HTML

Ở đây bạn tìm đến thể </body> và chèn đoạn mã này lên trên

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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-left:auto;margin-right: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(){
    $("#HTML5").sticky({topSpacing:0});
   });
 </script>

việc đơn giản của đoạn jQuery  này là sẽ làm cho những phần tử mà bạn mong muốn ở trên trang trượt theo khi màn hình qua khu vực của nó. Ở đây bạn thay thế HTML5 bằng id mà widget bạn muốn nó trượt theo khung màn hình, và topSpacing bằng khoảng cách giữ widget đó với cạnh trên của màn hình rồi lưu lại.