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

标签 jquery position fixed 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>

在这里您可以找到演示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,所以请宽容并解释我所有的错误!

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

谢谢。

最佳答案

这是我需要工作的代码:

$(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 工作。

jsfiddle jQuery library

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

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

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

关于jQuery 位置 :Fixed 'NAVBAR' by scrolling the page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22187317/

相关文章:

css - 固定左侧导航+剩余空间

javascript - 简单的灯箱反馈表?包含截图

javascript - 我如何使用鼠标悬停禁用 js 功能

javascript - 相对于另一个 div 大小更改的动画 div 移动

C++ ListControl - 图标位置

javascript - 使用java脚本像gmail一样滚动邮件正文并使用固定页脚

JQuery 在 Iframe 中查找元素(通过其文本)并向其添加 .click 函数

javascript - 独立于父 scrollTop 位置更改子项的顶部/左侧位置

css - 在响应式布局中使用 fittext.js 在绝对中间对齐文本

c# - 如何将 fixed 与 Array 或 T[] 类型的变量一起使用?