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

【问题标题】：How to make navigation menu stay at the top of the page while scrolling only?如何使导航菜单仅在滚动时停留在页面顶部？
【发布时间】：2014-09-25 18:13:09
【问题描述】：

我用ul > li 创建了一个导航菜单。
菜单实际上位于页面的中心。
我想要的是，只有在滚动时，我的菜单才会停留在页面顶部。

我可以使用 css

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

但实际上我只需要滚动。任何人都可以提出一些解决方案:)

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

你可以这样做：

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

css:

.fixed{位置：固定;}

当用户滚动回到页面顶部时，记得删除类固定表单 .menu。

【讨论】：