如何使導航菜單停留在頁面的頂部而僅滾動？

Question

我創建了一個導航菜單ul > li。
菜單實際上位於頁面的中心。
我想要的是，只有在滾動時，我的菜單纔會保留在頁面頂部。

我可以使用CSS

.menu { 
    position:fixed; 
    top:0; 
    float:left; 
} 
.menu li { 
    float:left; 
    padding:10px; 
    margin:2px; 
} 

做但實際上我需要的時候，我只滾動。任何一個可以提出一些解決方案:)

Answer 1

試試這個： -

<script> 
$(document).ready(function(){ 

    // hide targeted element first 
    $("#xg_navigation").hide(); 

    // fade back in targeted element 
    $(function() { 
     $(window).scroll(function() { 
     if ($(this).scrollTop() > 50) { 
      $('#xg_navigation').fadeIn(); 
     } else { 
      $('#xg_navigation').fadeOut(); 
     } 
    }); 
}); 

}); 
</script> 

Answer 2

你可以做這樣的事情：

$(window).scroll(function() { 
    if ($(document).scrollTop() > 100) 
    { 
     $('.menu').addClass('fixed'); 
    } 
}); 

CSS：

.fixed {位置：固定; }

記得在用戶滾動回頁面頂部時刪除class fixed form .menu。