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

Question

[Юлия]

Нужно на чистом CSS сделать так, чтоб при прокрутке странице блок навигации изменял цвет на белый. Изначально он прозрачный.

<nav class="navbar" id="mainNav">
            <div class="container">
                <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="link" id="navbarResponsive">
                    <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                        <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
                        <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
                        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

Answer 1

[Анастасия]

на чистом css нельзя. тут нужен js, который будет понимать, что страница прокручивается

Comments

[Юлия]

Можете тогда, пожалуйста, посказать как это сделать с js?

[Denise Kerimbekov]

Юлия, position: sticky; в помощь

[Юлия]

Denise Kerimbekov, это понятн, оно так и реализовано. Проблема именно в том, чтоб при прокрутке оно перестало быть прозрачным.
p.s. темные линии на фото пока просто вспомогаельную роль играют.

[Denise Kerimbekov]

Юлия,
$(window).scroll(function(){
if($(window).scrollTop()>100){
$(".nav-container").css("background-color", "#dfe2ea");
}
else
$(".nav-container").css("background-color", "#dfe2ea00");
})
изменил ответ так как лимит превышен 10 сообщений в день
Вот ещё один вариант
Юлия

[Юлия]

Denise Kerimbekov, спасибо)

[Denise Kerimbekov]

Юлия, Всегда пожалуйста )

[Юлия]

Denise Kerimbekov, не сработало(
В цсс убрала. Пробовала в Вашем коде менять $("nav") на $(".navigation"), тоже не работает

[Юлия]

Denise Kerimbekov, не-не, container для другого используется
вот стили к nav:

#mainNav{
    box-shadow: none;
   /* background-color: transparent;*/
    font-family: "Merriweather Sans";
}
.navigation{
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    /*z-index: 1030;*/
    border: 2px solid black;
}
.nav-container{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 75%;
    padding-left: 200px;
}