粘性导航 - 动画和向上推

Question

我正在尝试创建一个贴在顶部的导航标题 窗口/浏览器直到下一个导航标题（一个 div 框）推送 它向上看不到。导航标题有一个动画 一旦用户向下滚动到.fillwindow 的底部，就会淡入。

我创建了一个 JS Fiddle 来尝试更详细地解释我想要实现的目标。在那里，您将能够看到我面临的小故障。 http://jsfiddle.net/kntnqqa6/5/

• 有没有人能解释一下为什么 CSS 中的 'top' 属性似乎对 .header 类没有影响？
• 同样在 jquery 部分的.animate 事件中：.animate({'opacity':'1', 'top':'40'}，'top':'40' 不起作用？我假设是因为上面提到的问题

理想情况下，我的目标是让它无缝。正如您将看到的那样，它们之间的距离太远了。

非常感谢任何输入。

Answer 1

顶部 CSS 属性指定定位的部分位置 元素。 对非定位元素没有影响。

对于绝对定位的元素（那些带有 position: absolute 或 position: 固定），它指定上边距之间的距离 元素的边缘及其包含块的上边缘。

对于相对定位的元素（那些有 position:relative 的元素），它 指定元素低于其正常位置的移动量。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/top

我突出显示了影响您的代码的部分。 top 属性仅适用于定位（固定、绝对、相对）元素。您没有分配其中之一，使您的 div 放置为静态。

您的问题应该通过将position: relative 添加到.header 来解决