jquery - 试图滚动到 "fix"导航位置

Question

我想弄清楚如何让我的导航在窗口向下滚动时停留在页面顶部。我已经看到了一些关于如何执行此操作的示例(找到了一个有效的示例，但使我的菜单的点击功能停止工作)但我自己无法让它工作。

这是我的 jsFiddle

jQuery(有问题的代码)

 /* Code to "fix" navigation */
        $(window).scroll(function(){

        var menu = $("#navbar");
        var menuWidth = $("#wrapper").css("width");
        var menuPos = menu.offset();
        var menuTopPos = menuPos.top;

        if ( $(window).scrollTop() > (menuTopPos) ) {
            menu.css("position", "fixed").css("top", "0px").css("left", "0px").css("width", menuwidth);
        }
        else {
            menu.css("position", "relative").css("width", "100%");
        }

    });

HTML(基本结构)

<div id="wrapper">

<div id="header">
(Header stuff goes here)
</div>

<div id="navbar>
<ul class="nav-tabs">
(Menu goes here)</ul>
</div>

</div>

当我只是制作我的 #navbar position:fixed; 时，它显然会忽略所有布局格式并扩展到我网站的布局之外。出于这个原因，我试图将宽度设置为页面的 #wrapper，它被设置为仅是页面的特定宽度。

已编辑以在布局中显示页眉内容

Answer 1

您不需要任何 javascript 来执行此操作。如果你只想让导航从一开始就停留在顶部，给它一个position:fixed就可以了。当然，这意味着正确完成所有布局工作。

看this fiddle有关如何实现这一点的一个很好的例子。

基本上有一个固定的父元素，里面的子元素可以根据需要设置样式。

通常，当我构建网站时，我会创建一个名为“website-width”的类，这是我希望网站内容所在的宽度区域。在我网站的每个部分中，我添加了另一个 div，给它这个类“website-width”，并将所有内容放入其中。这将使您的所有网站内容保持固定宽度，从而保持一致，并且比您拥有一个 width:1000px 的巨大 div 更容易扩展或更新

更新

Is this你想要完成什么？