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 来实现所需的视图！

Working Demo

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上的固定菜单工作。即使您的导航位于页面中间，此代码也能正常工作。

Answer 3

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

<强> Here is working Demo

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 */

滚动固定水平导航菜单

3 个答案:

CSS代码：

JQuery代码：

重要的CSS：