JQuery 位置：通过滚动页面修复“导航栏”

Posted 2023-03-16

【中文标题】JQuery 位置：通过滚动页面修复“导航栏”

【英文标题】：JQuery Position:Fixed 'NAVBAR' by scrolling the page

【发布时间】：2014-03-05 02:30:49

【问题描述】：

基本上，只要 NAV 下的 #CONTENT DIV 到达窗口顶部，我希望我的 NAVBAR 保持在窗口顶部 position:fixed .

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 淡入或淡出，但它不起作用

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

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

另外我是意大利人，所以不要成为语法纳粹！哈哈

谢谢。

【问题讨论】：

scrolltop 应该是 scrollTop。另外，请记住scrollTop 应该应用于容器元素，它返回位于容器元素顶部上方的内容的垂直像素数。也许改用var y = $('#window').scrollTop();？

我们很高兴能够回答这些写得很好的问题。

【参考方案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 工作。

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

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

附带说明，您的 fadeIn() 和 fadeOut() 并不是真正需要的。我不太确定你想要完成什么，但你可以省略它们。

【参考方案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");
        
        );
);

快乐编码:)