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.

 tạo thanh menu trượt (Sticky menu) khi cuộn trang

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 smile)

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 ^^
– 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:
 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 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!
Copy vui lòng ghi nguồn bài viết được viết bởi: https://www.tranbadat.com/
Hướng dẫn tạo thanh menu cố định (Sticky menu) khi cuộn trang
Đánh giá bài viết
Tham khảo thêm:

THAM GIA BÌNH LUẬN

Vui lòng nhập bình luận của bạn!
Vui lòng nhập Tên của bạn

57 BÌNH LUẬN

  1. Chào ad! m làm theo ad rồi nhưng có 2 vấn đề xảy ra là:
    1. khi m kéo xuống được 1 tí thì nó dồn qua bên trái của lề
    2. M muốn chỉnh khoảng cách với Top thì phải sửa chỗ nào? m thử hết rồi mà cứ nhích chuột 1 tí là nó nhảy lên đầu rồi
    cám ơn ad

  2. mình làm đc rồi nhưng cái thanh menu có nằm bên phải, khi gắn code này vào thì cuộn xuống nó chạy sang bên trái che mất nội dung bên trái, làm sao cho nó vẫn ở chỗ cũ là bên phải dc nhỉ

  3. Chào anh đạt. Em đang dùng theme sahifa mà em muốn khi lên điện thoại thanh menu em nó trượt theo giống như trang của anh.
    Mà em không biết chỉnh ở đâu.
    Nếu anh có thời gian chỉ giúp em làm menu mobile chạy theo giống anh với nha….
    – Cảm ơn anh nhiều….

  4. bạn ơi, cho mình hỏi!
    nếu làm cái thanh menu được thì cái slide ở trang chủ bị lỗi ko chạy, còn sửa cho slide chạy thì menu làm ko được.
    Nó có liên quan gì đến đoạn code màu xanh dương áh, của mình là 1.10.2, chứ ko phải 1.6.4. Làm sao sửa đây sad web mình là http://www.canhosky9.net

  5. bạn ơi cho mình hỏi, mình đã làm thành công rồi nhưng thanh navibar của mình lúc kéo xuống nó lại nằm lệch sang bên trái, không thẳng hàng như trang của bạn giờ muốn chỉnh cho nó khi kéo thẳng xuống phải làm sao

  6. Chào các bạn mình gặp lỗi này không biết là lỗi gì nữa, cái thanh menu trên cung đó vào máy tính thì nó reponesive vừa màn hình được nhưng khi vào bằng điện thoại thì không vừa là sao, mong các bạn nào biết chỉ giúp mình với
    Đây là ảnh trình duyệt máy tính http://i.imgur.com/6Y5r3pH.jpg
    Còn đây là điện thoại
    http://i.imgur.com/t3WcMox.png
    Còn đây là code https://drive.google.com/file/d/0ByBzWAyW5EdvMnEzY1FVM2NncTA/view

  7. Lúc soạn thảo bài đăng bạn phải chọn nhãn theo thứ tự ngược lên nhé.Bạn chọn nhãn Sơn xe ma sau đó đến Hon da.Chúc bạn thành công

  8. Trần Bá Đạt _CTPG e đã làm đến bước 2 như bác nhưng e tìm mãi thẻ "sticknav" để cho đoạn mã vào giữa "
    (Đoạn code của navigation bar ở đây)
    "
    như bác nói mà không thấy bác xem teamview giúp e với ah

  9. Cám ơn ĐẠT mình làm được rồi, nhưng vẫn còn khoảng trắng trên chữ LIFESTYLE DESIGN, Làm phiền Đạt lúc nào rảnh thì hướng dẫn nốt mình phần này.
    Mong Đạt thông cảm vì mình o biết tí gì về CSS chỉ học mò từ internet thôi. Chúc site Đạt ngày càng có nhiều người ghé thăm!

  10. Vẫn còn 1 chút vướng mắt nữa Đạt ơi !
    Dưới cái menu hàng đầu tiên của mình, trên chữ tiêu đề LIFESTYLE DESIGN có 1 vệt giống như bóng đổ màu xám. Mò đi mò lại hoài không biết nó nằm chỗ nào, nhờ Đạt giúp giùm làm cách nào bỏ nó đi. Thanks !

  11. Không cần gửi code đâu, bạn vào code template, tìm: .blogouter-wrapper
    Bên trong nó sẽ có thẻ position, hiện tại là fixed, bây giờ hãy thay fixed thành absoluted là tự nhiên thanh menu trên sẽ không còn trượt theo nữa.
    Cuối cùng là áp dụng cho menu dưới của bạn như hướng dẫn của mình, trong đó, thanh menu dưới của bạn nằm ở id này: menu-wrapper

  12. Chào Đạt !
    Mình là không tìm thấy chữ 'navitions' như hướng dẫn của Đạt và template của mình cũng không giống của bạn (vì là template free). Vấn đề của mình là muốn khi cuộn trang thi hàng menu hàng thứ 2 sẽ cố định phía trên cùng, còn menu hàng thứ nhất sẽ ẩn đi (mà bây giờ thì nó đang ngược lại). Nói chung giống như menu trên trang web của Bạn là được.

    Mong Bạn hướng dẫn giúp, xin cám ơn!

    Nếu cần mình sẽ gửi cái template gốc cho Đạt chỉnh sữa trên đó rồi gửi lại cho mình, nếu bạn o thấy phiền. Nha!

  13. Cái này không được hoặc do kiến thức mình hạn hẹp nha bạn. Do mặc định Blogger nó sắp xếp theo Alphabet rồi, mình không chỉnh lại cái thứ tự như ý muốn được @-)

  14. cảm ơn bạn nha mình làm đc rồi. ban cho mình hỏi thêm là có cách nào tạo nhãn theo cấp không ạ.

    VD: Home » Air Blade » Sơn Xe Honda » Sơn Xe Máy » MẪU AIR BLADE SƠN PHỐI MÀU ĐỘC ĐÁO
    nhãn của mình h là như thế này mình muốn theo thứ tự

    Sơn Xe Máy » Sơn Xe Honda » Air Blade »…..
    cảm ơn bạn