Установите прозрачность навигационной панели Bootstrap на прокрутке

Я использую вторичное fille, называемое custom.css, чтобы перезаписать код начальной загрузки, и я хотел бы знать, как создать код, который активируется только тогда, когда посетитель моего сайта не находится в самой верхней части страницы.

До сих пор я создал прозрачную навигационную панель, используя код по умолчанию, предоставляемый бутстрапом. Единственное, что мне нужно сделать, это заставить его выполнить: background-color: #color, когда посетитель прокручивается вниз.

Пример: https://www.lyft.com/

Когда я нахожусь в верхней части страницы, навигационная панель прозрачна, но при прокрутке вниз она становится непрозрачной.

Ответ 1

Итак, для достижения этого эффекта нужен следующий код: (Я буду использовать jQuery, поскольку это язык, поддерживаемый bootstrap).

JQuery

/**
 * Listen to scroll to change header opacity class
 */
function checkScroll(){
    var startY = $('.navbar').height() * 2; //The point where the navbar changes in px

    if($(window).scrollTop() > startY){
        $('.navbar').addClass("scrolled");
    }else{
        $('.navbar').removeClass("scrolled");
    }
}

if($('.navbar').length > 0){
    $(window).on("scroll load resize", function(){
        checkScroll();
    });
}

Вы также можете использовать ScrollSpy для этого.

и ваш CSS (пример):

/* Add the below transitions to allow a smooth color change similar to lyft */
.navbar {
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

.navbar.scrolled {
    background: rgb(68, 68, 68); /* IE */
    background: rgba(0, 0, 0, 0.78); /* NON-IE */
}

Ответ 2

$(document).ready(function() {
    $(window).scroll(function() {
       if($(this).scrollTop() > height) { 
           $('.navbar').addClass('scrolled');
       } else {
           $('.navbar').removeClass('scrolled');
       }
    });
});