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，给它这个类“网站宽度”并将所有内容放在其中。这将使您的所有网站内容保持固定的宽度，使其保持一致，并且比使用宽度为1000px的巨型div更容易扩展或更新

<强> 更新

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);
        }
    })

试图修复＆＃34;滚动导航位置

2 个答案: