尝试在滚动上"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。当然，这意味着要正确地完成所有的布局工作。

看看这个小提琴，这是一个如何完成这个任务的好例子。

基本上有一个固定的父元素，里面的子元素可以按照你想要的样式来设计。

一般来说，当我建立网站时，我会创建一个名为"website-width"的类，这是我希望网站内容落在里面的宽度区域。在我网站的每个部分中，我添加另一个div，给它这个类"website-width"然后把所有内容放进去。这将保持你所有的网站内容在一个固定的宽度，所以它是一致的，它使它更容易扩展或更新，而不是如果你有一个巨大的div宽度:1000px的所有内容

更新

这是你想要完成的吗?

Answer 2

好了，我明白了。我的问题是，我试图找出#navbar的顶部位置，但#navbar是我的菜单，理论上总是在移动，所以顶部位置总是在变化。我所要做的是找到#navbar的顶部位置，但随后固定UL .Nav-Tabs在其中的位置。然后我意识到调整屏幕大小会扰乱导航，所以我添加了一个事件监听器来改变屏幕大小时导航的宽度。

EDIT:哦耶!这是更新后的jsFiddle。

像这样:

jQuery

var menu = $(".nav-tabs"); /* set menu to UL, not DIV */
    $(window).scroll(function(){
        var wrapperWidth = $("#wrapper").css("width");
        var menuPos = $("#navbar").offset(); /* find top of DIV */
        var menuTopPos = menuPos.top;
        if ( $(window).scrollTop() > menuTopPos ) {
            menu.css("position", "fixed");
            menu.css("top", "0px");
            menu.css("width", wrapperWidth);
        }
        else {
            menu.css("position", "relative");
            menu.css("width", "100%");
        }
    });
    // code to check menu width against wrapper width on resize
    $(window).resize(function(){
        var menuWidth = menu.css("width");
        var wrapperWidth = $("#wrapper").css("width");
        if ( menuWidth != wrapperWidth ) {
            menu.css("width", wrapperWidth);
        }
    })