我正在尝试创建一个固定在顶部的导航标题
窗口/浏览器,直到下一个导航标题(一个 div 框)被按下
它向上看不见。导航标题有一个动画
一旦用户向下滚动到 .fillwindow
的底部,就会淡入。
我创建了一个 JS Fiddle 来尝试更详细地解释我想要实现的目标。在那里你将能够看到我面临的小故障。 http://jsfiddle.net/kntnqqa6/5/
- 有谁能解释为什么 CSS 中的“top”属性似乎不会影响
.header
类? - 同样在 jquery 部分的
.animate
事件中:.animate({'opacity':'1', 'top':'40'}
,'top':'40'
不工作?我假设这是因为上面提到的问题
理想情况下,我的目标是使其无缝衔接。正如您将看到的那样,它们之间的距离太远了。
非常感谢任何输入。
最佳答案
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
来解决
关于jquery - 粘性导航 - 动画和向上推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30320713/