Оживляющий фиксированной навигации при прокрутке - ошибка

Question

я сейчас работаю на веб-сайте, который должен иметь аналогичные функциональные возможности, как этот: http://nzopera.com/2013/the-flying-dutchman

Вы можете увидеть эффект, я говорю, если вы прокрутите вниз на странице выше. 1.) Верхняя и нижняя прокладки заголовка сжимаются, и после этого вы буквально «прокручиваете» заголовок из своего окна просмотра. 2.) Если вы продолжаете немного прокручивать (в область содержимого), а затем снова прокручивать страницу, навигация становится видимой.

Я еще не реализовал второй эффект, потому что я хочу решить проблему с первым. Я создал быструю скрипку с моим текущим статусом: http://jsfiddle.net/FN8D/1/embedded/result/ HTML-разметка очень проста:

<header><!- HEADER CONTENT/NAVIGATION -></header> 
<div><!- MAIN CONTENT/NAVIGATION -></div> 

Я не уверен, если я должен положить мой JS код здесь, потому что это довольно долго. Если мне нужно, скажите, пожалуйста. Однако вы можете посмотреть на JS в ссылке на скрипку. То, что делает JS, проверяет направление прокрутки и вызывает функцию, которая вычисляет значения CSS (на основе текущей позиции прокрутки). Функция имеет несколько параметров:

startValue : Initial CSS value 
endValue : The CSS value to animate to 
distance : After which distance scrolled (in px) should the "animation" be over? 
initScroll : When (in px) should the "animation" start? 

В настоящее время первого эффекта (смотрите выше), в основном работает, но если сравнить его с тем, в ссылке выше него есть некоторые вопросы: 1. ) Все значения в моем код жестко закодирован. У вас есть идеи, как сделать это по-другому? Например. значения для прокладки жестко закодированы в JS. Поэтому, если я изменил «padding» в файле CSS, мне также придется изменить его в JS-файле. Или значение «padding-top» на «body» жестко запрограммировано, но оно зависит от начальной высоты заголовка. То есть «верхний» -значение заголовка (чтобы показать или скрыть заголовок), который зависит от высоты заголовка (без начального большого заполнения). - Чтобы решить хотя бы некоторые из этих жестко закодированных значений, я думал об использовании атрибутов данных (по крайней мере, начальное и конечное значение) в HTML, поэтому, по крайней мере, мне не нужно ничего менять в JS. Считаете ли вы, что это может сработать? Хотя у меня нет решения для «верхнего» значения, чтобы показать и скрыть заголовок. Это как-то должно зависеть от высоты (после сжатия) заголовка. И у меня пока нет решения для всех остальных оставшихся жестко закодированных значений.

2.) Возможно, вы заметили небольшой белый зазор, когда вы прокрутите страницу назад до конца после прокрутки вниз. Для меня это самая важная проблема прямо сейчас, потому что я действительно не знаю, как ее исправить. Иногда также случается, что белый зазор (скриншот прилагается ) довольно большой, потому что «анимация» не заканчивается должным образом. По сравнению с nzopera.com мой код кажется довольно медленным (для меня), и анимация не такая гладкая. Я думаю, именно поэтому появляется небольшая белая щель. Я мог бы, конечно, изменить фон на черный (тот же цвет, что и заголовок), чтобы «удалить» белый пробел, но это не сработает, потому что фоновый цвет содержимого должен быть белым и не будет большого изображения заголовка на каждый страница. Там должно быть правильное решение, чтобы исправить это, nzopera.com делает это также как-то. Любая помощь могла бы быть полезна.

Пока что все. У меня должно быть больше вопросов, как только я начну реализовывать второй эффект;) Спасибо заранее. Просто для вашей информации: Как вы можете видеть в моем коде, я вообще не разбираюсь в JS. Если у вас есть какое-либо другое предложение улучшить что-либо, пожалуйста, скажите мне ... все еще изучая :)

Answer 1

приятель, я переработал вашу функцию jquery, посмотрите на эту скрипку: http://jsfiddle.net/FN8Dc/4/. Теперь это должно работать со всеми параметрами, заданными в css, поэтому вам не нужно ничего менять в файле js.

Теперь позвольте мне объяснить мой код:

CSS код:

1. я удалил верхний отступ от тела, которые вы использовали для выравнивания изображения с заголовком.
2. Я установил z-index из .element в 2 так, чтобы .element был виден над всеми предметами, вы можете установить его на 999 в соответствии с вашими потребностями.
3. Я добавил position: relative в .container, потому что нам нужно, чтобы выровнять элемент с помощью jquery.

Теперь код JQuery:

1. var $element_outer_height = $(".element").outerHeight(), даст Используйте высоту .element + значения отступов.
2. $element_padding = ($element_outer_height - $(".element").height())/2; даст нам значение padding-top, первоначально используемое в .element, это значение будет использоваться ниже.
3. Мы используем это значение для выравнивания контейнера непосредственно под элементом: $(".container").css({ top: $element_outer_height});.
4. В окне прокрутки, мы делаем тест:
   • если прокручиваются значение ниже внешней высоты .element, мы должны уменьшить отступы .element и уменьшить значение .containertop так что .container еще хорошо выровнено с .element.
   • если прокручиваются значение достигает внешнюю высоту .element, мы должны здесь установить значение top из .element сверху минус высоты ней и padding к 0, таким образом: $(".element").css({top: -1 * $(".element").height(), padding: 0});.

Надеется, что это поможет, потому что это занимает много работы: D