Tạo Thanh Menu Trượt Khi Cuộn Trang

Chào các bạn đã quay lại với blog của mình. Dạo này blog mình ít đăng mấy bài viết về thủ thuật thế nên hôm nay hướng dẫn các bạn "Tạo Thanh Menu Trượt Khi Cuộn Trang"
- Lưu ý: chỉ áp dụng cho những blog có sẵn navigation bar, còn gọi là thanh điều hướng trang như của mình nha.

Các bước thực hiện:

– Đầu tiên bạn trền đoạn CSS sau vào trên thẻ ]]></b:skin> :

/* Bắt đầu Stick Nav */

sticknav {

background: #ffffff;

height: 30px;

width: 100%;

margin-right: 0px;

margin-left: 0px;

left: 0px;

right: 0px;

position: relative;

z-index: 9999;

}

.fixed { position:fixed;}

/* Kết thúc Stick Nav */

 – Giờ thì các bạn tìm đoạn code chứa navigation bar của các bạn, ví dụ như của mình thì chính là đoạn code chứa navitions này:

Hãy đặt toàn bộ code của navigation bar vào trong thẻ:

<sticknav>

(Đoạn code của navigation bar ở đây)

</sticknav>

– Cuối cùng là đặt đoạn code này trên thẻ </body> :

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function() {

var aboveHeight = $(‘header’).outerHeight();

    $(window).scroll(function(){

        if ($(window).scrollTop() > aboveHeight){

        $(‘sticknav’).addClass(‘fixed’).css(‘top’,’0′).next().css(‘padding-top’,’60px’);

        } else {

       $(‘sticknav’).removeClass(‘fixed’).next().css(‘padding-top’,’0′);

        }

    });

});

</script>

 Trong đó:

+ Với đoạn JS màu đỏ kia. Nếu trong blog bạn đã có dòng nào tương tự (Khác phiên bản 1.6.4 cũng được) thì bỏ nó đi nhé.

+ Còn đoạn màu xanh nếu để nguyên như thế thì mỗi khi bạn cuộn xuống thì thanh navigation sẽ tự nhảy để chuyển thành sticky nav. Còn nếu bạn muốn quy định khi cuộn xuống bao nhiêu px thì nó mới thành sticky nav thì dùng đoạn code này thay vào đó là: var aboveHeight = 300;

Sau đó lưu lại và hưởng thụ thôi. Chúc các bạn thành công!

Nguồn: Trần Bá Đạt Blog