Как мне изменить класс CSS навигация по прокрутке мимо точки привязки?

Я использую Bootstrap 3 и хочу достичь этого эффекта, когда пользователь прокручивает изображение большого заголовка на моей странице. Мне нужен фон navbar для перехода от прозрачного к белому. Я посмотрел в их коде, и я ЗНАЮ, что это делается с помощью javascript, и даже видел WHERE. Я думаю (посмотрите ID '#main -header 'в этом JS)...

Не зная продвинутый Javascript в стороне, я ищу способ применить это к моей панели навигации при прокрутке мимо определенной точки. Класс для моего кода называется "navbar", и я хотел бы, чтобы он стал белым, когда он прошел "#main". Дайте мне знать, если вам нужна дополнительная информация, и спасибо заранее, если кто-то захочет помочь!

Ответы

Ответ 1

Если вы используете Twitter Bootstrap, это может быть достигнуто с помощью плагина 'Affix'

Это довольно просто настроить, вот документация

Ответ 2

Самый простой способ выполнить то, что вы пытаетесь сделать, - это сочетание простого javascript (в данном случае jQuery) и переходов CSS3.

Мы будем использовать JS для проверки положения прокрутки окон в каждом событии прокрутки и сравнить его с расстоянием дна элемента #main - если положение прокрутки больше, тогда мы применим класс к чтобы указать, что мы прокрутили прошлое #main, а затем мы будем использовать CSS для определения стиля навигации для этого "состояния".

Итак, наша основная разметка:

<nav class="nav">
    <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

И наш javascript:

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    var stop = Math.round($(window).scrollTop());

    if (stop > mainbottom) {
        $('.nav').addClass('past-main');
    } else {
        $('.nav').removeClass('past-main');
    }

});

И наши стили:

.nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.nav.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}

Рабочий пример Codepen

Вот как я это сделал здесь. Я также использую дросселирование прокрутки и немного более сложную семантику стилизации, но это ее суть.