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

标签 jquery css jquery-animate push sticky

我正在尝试创建一个固定在顶部的导航标题 窗口/浏览器,直到下一个导航标题(一个 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/

相关文章:

队列 :false has been used? 后未触发 jQuery 动画回调

ios - UIImageView 缩放/淡入淡出动画?

javascript - 在javascript中使用正则表达式提取字符串

javascript - 如何使用 <a> 标记内的按钮单击以防止链接被跟踪?

html - 我如何创建图像以使用 css 选择和取消选择

javascript - 同一类对象上的动画,一次一个

javascript - 发布在 Ajax 中无法将输入保存到数据库

javascript - jQuery 图像组动画

javascript - 更改日期格式在数据库中输入了错误的日期

jquery - 如何为 img src 使用变量?