Giữ tiêu đề bài viết khi cuộn trang

Cách giữ tiêu đề bài viết khi cuộn trang.

Trong demo hôm trước mình giới thiệu với mọi người một template chuyên cho web hài.

(DEMO)

Bạn thấy đó khi cuộn trang xuống dưới thì tiêu đề luôn được giữ lại trước khi chuyển sang tiêu đề khác.

Trong bài viết này mình sẽ share đoạn code này để mọi người có thể làm được như vậy :




Download Code :               Download

Cách áp dụng tới Blogger : 

Bước 1: Mở chế độ chỉnh sửa:

Bạn vào Dashbroad -> Mẫu -> Chỉnh sửa HTML

Bước 2: Tìm dòng code sau :

<h3 class='post-title entry-title'

Đặt toàn bộ thẻ h3 này trong :  <div class='followMeBar'>Đặt vào đây</div>

Giống như hình :

Bước 3: Thêm trước </head> đoạn code Javascript sau :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function stickyTitles(stickies) {
    this.load = function() {
        stickies.each(function(){
            var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
            thisSticky.parent().height(thisSticky.outerHeight());
            jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
        });
    }
    this.scroll = function() {
        stickies.each(function(i){

            var thisSticky = jQuery(this),
                nextSticky = stickies.eq(i+1),
                prevSticky = stickies.eq(i-1),
                pos = jQuery.data(thisSticky[0], 'pos');
            if (pos <= jQuery(window).scrollTop()) {
                thisSticky.addClass("fixed");
                if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
                    thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
                }
            } else {
                thisSticky.removeClass("fixed");
                if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos')  - prevSticky.outerHeight()) {
                    prevSticky.removeClass("absolute").removeAttr("style");
                }
            }
        });      
    }
}
jQuery(document).ready(function(){
    var newStickies = new stickyTitles(jQuery(".followMeBar"));
    newStickies.load();
    jQuery(window).on("scroll", function() {
        newStickies.scroll();
    });
});


</script>
<style type="text/css">
    .followMeBar {
        border-bottom: solid 1px #111;
        border-top: solid 1px #444;
        padding: 1%;
        position: relative;
        z-index: 1;
    }
    .followMeBar.fixed {
        position: fixed;
        top: 0;
        width: 98%;
        z-index: 0;
    }
    .followMeBar.fixed.absolute {
        position: absolute;
    }
</style>

Ok. Save Template và bạn Test thử. Sau đó chỉnh lại cho phù hợp.

Ghi rõ nguồn erhay khi bạn phát hành thông tin từ trang này