jquery - 粘性导航 - 动画和向上推

Question

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

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

• 有谁能解释为什么 CSS 中的“top”属性似乎不会影响 .header 类？
• 同样在 jquery 部分的 .animate 事件中:.animate({'opacity':'1', 'top':'40'}， 'top':'40' 不工作？我假设这是因为上面提到的问题

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

非常感谢任何输入。

Answer 1

The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.

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

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

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