滚动时固定水平导航菜单

Question

我还是相对较新的编程世界，我目前正在尝试创建一个带有水平导航菜单的网站，该菜单在向下滚动时会粘在页面顶部。 例如，我想创建一些东西，如http://www.w3schools.com/html/上的菜单。菜单是div内的一个列表，它本身位于另一个div中。 当用一些javascript向下滚动页面时，我试图将封闭div的样式更改为固定，但这非常小问题并且无法有效工作。 有没有其他方法可以做到这一点？

这是我在html文件底部使用的Javascript，而css只是更改为position : fixed;

<script type="text/javascript">
var header = $("#menu-wrapper");
var headerY = header.offset().top;
$(document).scroll(function () {
var y = $(document).scrollTop();

if (y >= headerY) {
    header.addClass('fixed');
} else {
    header.removeClass('fixed');
}
});`
</script>

Answer 1

使用简单的CSS3可以实现所需的视图，初始级别不需要JavaScript ！

工作演示

CSS代码：

#cssmenu {
   position:fixed;
   top: 0;
   margin:auto;
   left: 0;
   right: 0;
   width: 100%;
   height: 50px;
   background-color: #4861A3;
}

Answer 2

$(document).ready(function() {
    $(window).scroll(function () {
       var scroll = $(this).scrollTop();
       var topDist = $("your container Selector").position();
       if (scroll > topDist.top) {
          $('Your Menu Seloctor').css({"position":"fixed","top":"0"});
       } else {
          $('Your Menu Seloctor').css({"position":"static","top":"auto"});
       }
   });

}）;

上面的代码使用Jquery为Scroll上的固定Menu工作。 即使您的导航位于页面中间，此代码也能正常工作。

Answer 3

这个问题需要稍微使用JQuery来获得所需的输出，并且还包含不同的设计风格！ 因此添加另一个答案！

这是工作演示

JQuery代码：

$("document").ready(function(){

        $(window).scroll(function () {
            if ($(this).scrollTop() > 136) {
                $('.nav-container').addClass("f-nav");
            } else {
                $('.nav-container').removeClass("f-nav");
            }
        });

    });

重要的CSS：

.f-nav{ z-index: 9999; position: fixed; top: 0; width: 100%;} /* this make our menu float top */