Hướng dẫn tạo thanh menu cố định (Sticky menu) khi cuộn trang

Nay tiếp tục với phần hướng dẫn các thủ thuật dành cho blogspot. Các bạn luôn muốn trang web mình trở nên hiện đại và đẹp, các bạn thấy nhiều trang web có cái thanh menu mỗi khi cuộn trang xuống là nó tự dính vào phía trên của màn hình và trượt theo... như web của mình ^_^ Thanh menu này sẽ giúp mọi người dễ dàng chuyển qua lại giữa các nội dung.

Và bài viết này là để hướng dẫn các bạn làm điều đó: Tạo thanh menu cố định (Sticky Menu) khi cuộn trang

Trước khi vào bài viết, mình lưu ý rằng chỉ áp dụng cho những blog có sẵn thanh navigation bar, hay gọi là thanh điều hướng trang như của mình nha. Còn nếu không có thì bạn có thể tạo ra nó, bằng cách... đợi bài hướng dẫn tiếp theo của mình :))

Bắt đầu vào hướng dẫn tạo sticky menu thôi:

- Đầu tiên phải tạo CSS cho nó, bạn vào Edit HTML là thêm đoạn CSS này phía trên thẻ ]]></b:skin> nhé:

/* 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 */

2 cái bên trong dấu /* */ chỉ dùng để báo cho bạn biết code bên trong nó nói về gì thôi, nên không cần quan trọng đâu ^^

Xem thêm: Hướng dẫn tạo widget cố định khi cuộn trang

- Giờ thì tìm đến đ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="http://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 xanh 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 tím 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 đó:

var aboveHeight = 300;

Cuối cùng là lưu lại và bạn đã có được thanh menu cố định ( Sticky menu) khi cuộn trang rồi đấy, nó sẽ nằm trên cùng và trượt theo bạn!