Переход на переход

Ответ 1

Вам нужно будет добавить еще один контейнер для достижения эффекта, который вы ищете. То, что вы, по сути, хотите иметь, это контейнер вверху и другой контейнер, который будет исчезать и исчезать в зависимости от вашего поведения прокрутки. Итак, как вы это достигаете? Создайте -Element на верхней части страницы, например, на вашем сером поле. При прокрутке вниз, не превращайте его, вместо этого исчезайте в другом ранее скрытом контейнере, чтобы действовать как ваша навигация, когда не вверху страницы. Теперь, если вы прокрутите резервную копию, проверьте местоположение прокрутки, и если два местоположения обоих контейнеров перекрываются, начните исчезать контейнер, который вы используете, когда он не находится в верхней части страницы. Я не думаю, что есть другое решение. Я могу попробовать написать код на нем сейчас, я отредактирую свой пост, если бы у меня был успех. Вы также можете попробовать работать с другим div внутри фактического заголовка и z-индекса, хотя это может оказаться очень плохо.

Я сделал все возможное, чтобы добиться того, чего вы хотите. Вот CodePen. Я использовал два разных div, один из которых называется .dynamic-header и один обычный заголовок, и я добавил функцию для обнаружения jQuery In-Viewport.

$.fn.isOnScreen = function(){
    var element = this.get(0);
    var bounds = element.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}

Я надеюсь, что это соответствует вашим потребностям. Кроме того, я изменил некоторые CSS, используя Top-Property для перехода. Вы можете передать все это на классы CSS и использовать их вместо этого, но я подумал, что это самое простое решение для демонстрационных целей. Это то, что вы хотите?

Изменить 1. В качестве примера вы назвали bartaile.com. Я взглянул на эффект, который они создают и воссоздал. Что вам нужно сделать, так это создать такую ​​структуру:

<div class="header-bg"></div>
    <div class="header-content">
      <ul>
        <li>YOUR HEADER</li>
      </ul>
    </div>

Я сделал для этого CodePen. Заголовок-bg имеет высоту 0. Содержимое заголовка имеет высоту, скажем, 80px и цвет фона прозрачного. Теперь НЕ проверяйте, в каком направлении прокручивается. Единственным важным аспектом эффекта является то, насколько далеко вы от вершины/являетесь конкретным элементом в видовом экране? Я пошел за 400px сверху. Теперь, когда это требование выполняется, просто затухайте в заголовке-bg. Он будет заключен между оберткой и содержимым и предоставит фон. Вместе с тем вы также можете изменить цвет содержимого заголовка, но я этого не делал. Это то, что делает bartaile.com, tho, поэтому вы можете включить его. Наслаждайтесь!

Изменить 2. Я редактировал CodePen в соответствии с вашими комментариями. См. Это в действии здесь. Это делает следующее: заголовок есть. При прокрутке вниз он исчезнет. При прокрутке вверх он откроет фон, но при прокрутке, чтобы scrollTop < 400, фон будет исчезать. Насколько я понял, это то, что вы хотите. Он использует структуру, опубликованную выше.

Ответ 2

Я проверяю "bartaile.com", и я должен указать, что они используют сторонний lib, называемый "fullpage". Если вы хотите достичь такого эффекта, вы должны проверить этот lib fullpage.js. Это простой и простой в использовании плагин для создания полноэкранных прокручивающих веб-сайтов (также известных как веб-сайты одной страницы или сайты с одной страницей). Это позволяет создавать полноэкранные прокручивающие веб-сайты, а также добавлять некоторые ландшафтные слайдеры внутри разделов сайта.

Этот плагин может обрабатывать "полноэкранную прокрутку", а также обычную прокрутку. Вы можете добиться своего эффекта с помощью этого гораздо более легкого