Giữ nguyên Header khi cuộn trang theo phong cách Facebook bằng jQuery

Hầu như trong chúng ta ai cũng đều có tài khoản Facebook và truy cập hàng ngày. Nếu các bạn để ý, khi chúng ta xem nội dung trên trang Facebook thì phần header (tức là phần ở trên cùng  ) không hề di chuyển và giữ nguyên vị trí khi chúng ta cuộn trang lại xem nội dung bên dưới. Để dễ hiểu các bạn có thể xem demo .

Xem Demo | Download

Đầu tiên chúng ta sẽ cần có bộ khung như sau :

<div id="header">
    <h1>Giữ nguyên Header khi cuộn trang theo phong cách Facebook bằng jQuery</h1>
</div>

<p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>

Phần quan trọng nhất là chèn đoạn jQuery bên dưới :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {

    var div = $('#header');
    var start = $(div).offset().top;

    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : ');
    });

});
</script>

Vậy là xong rồi đó các bạn, rất đơn giản và dễ thực hiện phải không các bạn. Hiện nay có rất nhiều jQuery plugin cũng như js framework giúp bạn làm điều này, nhưng để có thể giúp các bạn tìm hiểu kỹ hơn và có kiến thức cơ bản về jQuery thì đoạn code bên trên sẽ rất hữu ích cho các bạn.

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster