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

Я новичок в jQuery, и я учусь, когда я ухожу, но изо всех сил пытаюсь понять, как указать, что при прокрутке белый фон навигации перемещается вверх, чтобы отобразить белый текст навигации на панели 1?

bartaile.com - это то, что я использую в качестве вдохновения, и изменения, которые я делаю для навигации на бартах, --- --- после того, как пользователь прокручивает первую панель, навигация скрывается, только когда пользователь выполняет прокрутку, появляется навигационное шоу снова, когда панель 1 возвращается назад, белые переходы навигации скользят вверх, чтобы скрыть и отобразить белый текст.

Любая помощь или советы, чтобы узнать, как это сделать, будем очень благодарны!: -)

var lastScrollTop = 0;
$(window).on('scroll', function() {
    var header = $('.header');
    var stage0 = $('.stage-0');
    var scrollTop = $(window).scrollTop();
    if (scrollTop > lastScrollTop) {
        // down scroll
        if (scrollTop > stage0.offset().top + stage0.height()) {
            header.addClass('hide');
        }
    } else {
        // up scroll
        if (scrollTop <= stage0.offset().top + stage0.height()) {
            header.removeClass('headerBGchange headerLIchange');
			
        } else {
            header.removeClass('hide').addClass('headerBGchange headerLIchange BGupTranistion');
        }
    }
    lastScrollTop = scrollTop;
});

.header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 80px;
    -webkit-transition: top .5s ease;
    transition: top .5s ease;
    position: fixed;
    width: 100%;
    top: 0;
    background-color: transparent;
    overflow: hidden;
}

.header ul {
    margin: 20px;
    padding: 0;
}

.header ul li {
    display: inline-block;
    margin-right: 20px;
    color: white;
}

.header ul li:last-child {
    margin-right: 0;
}

.hide {
    top: -80px;
}

.headerBGchange {
    Background: white;
}

.BGupTranistion {
}

.header.headerLIchange ul li {
    color: Blue;
}

.header.headerLIchange {
	border-bottom: 1px solid black;
}'

	


</style>
<!--stage style--><style>

.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background-color: white;
	border-bottom: 1px solid black;
    font-size: 48px;
	height: 200px;
	width: 100%;
	
}

.stage-0 {
    background: grey;
}

.stage-24 {
    background: #433937;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="header">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>

Ответ 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. Это простой и простой в использовании плагин для создания полноэкранных прокручивающих веб-сайтов (также известных как веб-сайты одной страницы или сайты с одной страницей). Это позволяет создавать полноэкранные прокручивающие веб-сайты, а также добавлять некоторые ландшафтные слайдеры внутри разделов сайта.

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