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:
 tạo thanh menu trượt (Sticky menu) khi cuộn trang
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

27 nhận xét:

  1. Hài vđ cái logo cũng cop :)

    Trả lờiXóa
    Trả lời
    1. ahihi
      tại e ko có cái logo não đẹp lên lấy của a :D

      Xóa
    2. Cái logo ấy chả có ý nghĩa gì cả :v

      Xóa
    3. Cái logo này Blog thằng nào chả có :v Hài vd :)

      Xóa
  2. Lại về Template này rồi à :))

    Trả lờiXóa
  3. Trả lời
    1. có cái logo à bác ơi :3 thumbnail tự làm :3

      Xóa
    2. hihi :v tại làm biếng làm logo quá :3

      Xóa
  4. Trả lời
    1. dạo này thấy ít tương tác

      Xóa
    2. tại dạo này e hơi bận 1 chút :( nên để vài bữa nữa e qua tt lại nha a :(

      Xóa

- Không spam bừa bãi, thô tục
- Tích chọn "Thông báo cho tôi" để nhận phản hồi từ tác giả qua mail.