jQuery 位置 :Fixed 'NAVBAR' by scrolling the page

Question

基本上，一旦 NAV 下的#CONTENT DIV到达窗口顶部，我希望我的导航栏保持在窗口顶部位置:固定 .

HTML 是

<header>
Which is full screen size: 100% x 100%
</header>

<nav>
</nav>

<div id="content">
<section>
</section>

<footer>
</footer>
</div>

在这里您可以找到演示http://jsfiddle.net/dcdeiv/aG6DK/2/除了 jQuery 代码之外，一切都工作正常。

我尝试在滚动时根据 #contentDiv 的高度值的返回创建一个变量。我想使用该变量在 #contentDiv 到达窗口顶部时立即使 NAV 淡入或淡出，但它不起作用

$(document).scroll(function () {
    var x = $('#content').scrolltop();
    if (x = 0) {
        $('nav').fadeIn().css({"position":"fixed","top":"0"});
    } else {
        $('nav').fadeOut();
    }
});

你能帮我一下吗？这是我第一次使用 jQuery，所以请宽容并解释我所有的错误!

加上我是意大利人，所以不要成为语法纳粹!哈哈

谢谢。

Answer 1

这是我需要工作的代码:

$(document).ready(function() {
    $(document).scroll(function () {
        var scroll = $(this).scrollTop();
        var topDist = $("#container").position();
        if (scroll > topDist.top) {
            $('nav').css({"position":"fixed","top":"0"});
        } else {
            $('nav').css({"position":"static","top":"auto"});
        }
    });
});

DEMO

以下是语法错误:

• .scrolltop() 应该是 .scrollTop()
• if(x = 0) 应该是 if(x == 0) (或者不是，请参见上面的代码)

此外，在 jsfiddle 中，您必须在左上角指定一个库才能使 jQuery 工作。

你的逻辑还需要一点帮助。

1. .scrollTop() 只获取页面滚动条的位置。这意味着它从 0 开始。因此，一旦用户尝试滚动，您的代码就会将导航粘到顶部。
2. 我们需要导航在到达顶部后保持不变，因此我们需要知道它距离顶部有多远。 var topDist = $("#container").position();创建一个同时具有容器的“top”和“left”属性的对象。然后我们可以通过 topDist.top 检索顶部。
3. 现在我们已经知道了滚动位置 (.scrollTop) 以及“nav”在页面下方的距离，我们可以比较两者，然后运行您的原始操作。

顺便说一句，fadeIn() 和 fadeOut() 并不是真正必要的。我不太确定你想要完成什么，但你可以忽略它们。