Menu Cố Định Chỉ Hiển Thị Khi Cuộn Xuống Dưới

Chào các bạn.
Mình đang tập thiết kế template có thanh menu cố định khi cuộn trang., Nhưng mình muốn thanh menu này chỉ hiển thị khi kéo xuống dưới, còn ở trên top thì không hiện ra. Giống như giao diện của facebook

Bình thường thì không có.


Khi kéo xuống dưới thì hiện ra menu như hình bên dưới.


Mong các bạn giúp đỡ, cảm ơn.

 

có ai biết vấn đề này không nhỉ

 

đó chính là tính năng positon:fixed trong css,cần add class hay id riêng cho div menu rồi đặt thuộc tính position:fixed là được thôi bạn

 

Mình đã thử nhưng cách của bạn, Nhưng ý của mình là trang facebook có 2 thanh menu. 1 thanh màu xanh thì lun hiển thị, còn thanh còn lại thì chỉ hiển thị khi kéo xuống (như hình trên mình đính kèm)

và mình làm code như sau nhưng vẫn ko dc, chỉ có 1 thanh hiển thị chứ ko nhưg câu hỏi mình đặt ra

Mã:

<style type='text/css'>
#top{
    height:33px;
    width:100%;
    top:0;
    position:fixed;
    bottom:auto;
    z-index:9999999;
    background: #fff;
    }
</style>
<div id="top">
<?php echo $view->position('top'); ?>
        </div>

 

còn ai bít vấn đề này ko nhỉ?

 

Chú thích thêm:

check offset và add class bằng javacript
cái class cần add nó là fixed.

Chúc bạn thành công

 

vọc vạch nghiên cứu mấy hôm giờ nhưg vẫn chưa được kết quả nhưg mong đợi, chắc có thể do ngu quá. mong các bạn hướng dẫn tường tận, cảm ơn nhiều....
@@

 

mình đã kết hợp javascript vào và đã thành công

Mã:

<style type="text/css">
.nav-container{ background: #fff;}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */
.nav { height: 42px;}
</style>
<div class="nav-container">
<div class="nav">
<?php echo $view->position('top'); ?>
</div>
</div>
<script type="text/javascript">
jQuery("document").ready(function($){
    var nav = $('.nav-container');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});
</script>

Nếu dùng Firefox thì ko có vấn đề gì nhưng chrome thì phát sinh lỗi như sau:
Khi ở trang chủ thì ko bị gì cả, nhưng khi vào các bài sản phẩm bất kì thì thanh menu lúc hiện lúc ko?
link demo:
http://muako.com/san-pham/ad/dien-t...-sim-2-song-gia-cuc-mem,342.html#.U0ebiFV_uPw

mong các bạn giúp đỡ... cảm ơn nhiều...

 

Cái này có sử dụng extensions được không mọi người. Nếu được cho mình xin cái tên với. Cùng đang muốn sử lý menu cho cái web của mình nhưng không rành css lắm.
Web của mình

Mã:

https://dienlanhmiennam.com