Nội dung chính
- 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
- Bắt đầu vào hướng dẫn tạo sticky menu thôi:
Nội dung chính
- 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
- Bắt đầu vào hướng dẫn tạo sticky menu thôi:
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 */
<sticknav>(Đoạn code của navigation bar ở đây)</sticknav>
<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>
+ 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;