如何使导航菜单停留在页面的顶部而仅滚动？

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。