Sticky Navigation – Animates and Pushed Upwards

I am trying to create a navigation header that sticks to the top of
the window/browser until the next navigation header (a div box) pushes
it upwards out of view. The navigation header has an animation that
fades in once the user scrolls down to the bottom of .fillwindow.

I have created a JS Fiddle to try explain in better detail what I am trying to achieve. There you will be able to see the little glitches I am faced with. http://jsfiddle.net/kntnqqa6/5/

  • Is anyone able to explain as to why the ‘top’ property in CSS doesn’t seem to effect the class .header?
  • also in the .animate event in the jquery section: .animate({'opacity':'1', 'top':'40'}, the 'top':'40' isn’t working? I’m assuming it’s because of the problem mentioned above

Ideally, my aim is to make it seamless. As you will see it’s too distant from each other.

Any input is greatly appreciated.


Source: jquery

1 Comment

  1. Digin Dominic

    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.

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

    I highlighted the part that affects your code. The top property only works on positioned (fixed, absolute, relative) elements. You didn’t assign one of those, making your div placed static.

    Your problems should be solved by adding position: relative to .header

    Reply

Leave a Reply