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

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。