Sticky Navigation - Анимирует и толкает вверх

Question

Я пытаюсь создать заголовок навигации, который придерживается в верхней части окна окна/браузера, пока следующий заголовок навигации (поле «div») не сдвинет вверх. Заголовок навигации имеет анимацию, которая исчезает, как только пользователь прокручивает вниз до .fillwindow.

Я создал скрипт JS, чтобы лучше объяснить, что я пытаюсь достичь. Там вы сможете увидеть небольшие сбои, с которыми я сталкиваюсь. http://jsfiddle.net/kntnqqa6/5/

• ли кто-нибудь может объяснить, почему «сверху» свойство в CSS, кажется, не влияет на класс .header?
• также есть в .animate события в секции jquery: .animate({'opacity':'1', 'top':'40'}, 'top':'40' не работает? Я предполагаю, что это из-за проблемы, упомянутой выше.

В идеале, моя цель - сделать ее бесшовной. Как вы увидите, он слишком далек друг от друга.

Любой ввод очень ценится.

Answer 1

Верхнее свойство CSS указывает часть позиции позиционированных элементов . Он не влияет на элементы, не находящиеся на позициях.

Для абсолютно позиционированных элементов (с положением: абсолютное или положение: фиксированное), оно определяет расстояние между верхним краем краем элемента и верхним краем его содержащего блока.

Для относительно позиционированных элементов (с положением: относительный), он определяет величину перемещения элемента ниже его нормального положения.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/top

Я выделил ту часть, которая влияет на ваш код. Свойство top работает только с позиционированными (фиксированными, абсолютными, относительными) элементами. Вы не назначили один из них, сделав ваш div статическим.

Ваши проблемы должны быть решены путем добавления position: relative к .header