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

时间:2015-05-19 08:43:03

标签: jquery css jquery-animate push sticky

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

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

  • 是否有人能够解释为什么' top' CSS中的属性似乎不会影响班级.header
  • 同样位于jquery部分的.animate事件中:.animate({'opacity':'1', 'top':'40'}'top':'40'还没有工作?我因为上面提到的问题而假设它是

理想情况下,我的目标是使其无缝。你会发现它彼此距离太远了。

非常感谢任何输入。

1 个答案:

答案 0 :(得分:0)

  

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

     

对于绝对定位的元素(具有位置的元素:绝对或   position:fixed),它指定上边距之间的距离   元素的边缘和包含块的顶边。

     

对于相对定位的元素(具有位置:相对的元素),它   指定元素移动到正常位置以下的数量。

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

我突出显示了影响代码的部分。 visionSupportPackages属性仅适用于定位(固定,绝对,相对)元素。你没有指定其中一个,使你的div静止不动。

top添加到position: relative

,可以解决您的问题