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

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 {位置是：固定;}

请记住，当用户滚动回到页面顶部时，删除类固定形式的.menu。