尝试 "fix" 滚动时的导航位置

Question

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

这是我的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" 的 class，这是我希望网站内容落入的宽度区域。在我网站的每个部分中，我添加另一个 div，给它 class "website-width" 并将所有内容放入其中。这将使您的所有网站内容保持固定宽度，从而保持一致，并且比您拥有一个巨大的 div 和 width:1000px 以及其中的所有内容更容易扩展或更新

更新

Is this您想要完成什么？

Answer 2

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

编辑： 哦耶！这是更新后的 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);
        }
    })

尝试 "fix" 滚动时的导航位置

Trying to "fix" navigation position on scroll

jquery

html

css

fixed