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

08/10/2013

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 .

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

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:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • bibochip

    Mình làm như bạn nhưng Menu dọc của mình nó bị giữ lên trên. khi lăn chuột thì bị giật giật lên trên và không lăn xuống được. Bạn giúp mình nhé. Nếu cần thì cho mình email và mình gửi toàn bộ cho bạn!

  • bibochip

    rất cảm ơn bạn, mình đã làm được rồi!

  • nguyendung

    Cảm ơn bạn vì tất cả, mình học rất nhiều kiến thức từ đây.