Question

基本上我希望我的NAVBAR在NAV下的 #CONTENT DIV 到达窗口顶部后立即停留在窗口顶部位置：固定

HTML

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

<nav>
</nav>

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

<footer>
</footer>
</div>

在这里你可以找到DEMO http://jsfiddle.net/dcdeiv/aG6DK/2/ 一切正常，除了jQuery代码。

我试图在滚动时从#contentDiv的高度值返回创建一个变量。我想在#contentDiv到达窗口顶部时使用该变量来使NAV fadeIn或fadeOut但它不起作用

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

你能帮帮我吗？这是我第一次使用jQuery，所以请放纵并向我解释我的所有错误！

加上我是意大利人所以不要是语法纳粹！ LOL

谢谢。

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（）
如果（x = 0）应该是if（x == 0）（或者不是，见上面的代码）

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

jsfiddle jQuery library

你的逻辑也需要一些帮助。

.scrollTop（）仅获取页面滚动条的位置。这意味着它从0开始。因此，只要用户尝试滚动，您所拥有的代码就会将导航粘到顶部。
我们需要导航器一旦到达顶部就粘住，所以我们需要知道它与顶部的距离。 var topDist = $（“＃container”）。position（）;创建一个具有容器的“top”和“left”属性的对象。然后我们可以通过topDist.top检索顶部。
既然我们有滚动位置（.scrollTop）以及`nav`页面的下方，我们可以比较两者，然后运行原始动作。

作为旁注，你的fadeIn（）和fadeOut（）并不是必需的。我不太确定你想要完成什么，但你可以省略它们。

Answer 2

你想要这个??? ：d

首先。其scrollTop()而非scrolltop() ... T是首都。第二，获得你想要的div的位置。然后将其与当前滚动位置进行比较。而已。第三，如果您希望导航栏始终存在，fadeOut()不是一个好的选择，否则，一旦用户上升，导航栏就会被移除。

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

快乐编码：）

JQuery Position：通过滚动页面修复了'NAVBAR'

2 个答案: