Как изменить фон меню при прокрутке страницы (CSS)

Question

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

.logo {
  float: left;
  transition: all .3s ease 0s;
  color: black;
}
nav {
  float: right;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
.navbar{
    border-bottom: 0;
    border-top: 0;
    margin-bottom: 0;
}
.navbar li a{
    color: white;
    padding: 20px 15px;
    background: transparent none repeat scroll 0 0;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: capitalize;
    transition: all .3s ease 0s;
    overflow: hidden;
}
.navbar li a:hover
{
  color: #32CD32;  
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
.container {
  width: 100%;
  max-width: 1100px;
  padding: 15px;
  margin: 0 auto;

}
.navbar a {
  text-decoration: none;
  line-height: 16px;
}

<div class="head">
        <div class="container">
            <img src="images/logo.png" lass="im1" >
            <nav class="navbar">
                <ul>
                    <li class="home"><a href="#home">Home</a></li>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#courses">Courses</a></li>
                    <li><a href="#testomonial">Testomonial</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#faqs">Faqs</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>

Answer 1

Как вариант на jQuery:

$(document).scroll(function(e) {
    $(window).scrollTop() > 100 ? $('.nav').addClass('nav__color') : $('.nav').removeClass('nav__color');
});

body {
  height: 2000px;
}

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: chocolate;
}

.nav__color {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav"></div>

100 - насколько прокрутили (значение можете менять)

.nav - ваш блок

nav__color - класс, который добавляем/удаляем к вашему блоку

Answer 2

Однако, если у вас имеется острая необходимость реализовать задуманное исключительно на CSS, в таком случае вот вам решение. Пожалуйста, получите и распишитесь:

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

ul,
li {
  list-style-type: none;
}

li {
  display: inline-block;
  margin: 0 20px;
  line-height: 60px;
  color: #222;
  font-family: sans-serif;
  text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.5);
}

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 99px;
  background: transparent;
  border-bottom: 10px solid antiquewhite;
  z-index: 4;
}

.nav__bg__start {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: burlywood;
  -webkit-box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.2);
  box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.2);
  z-index: 2;
}

.nav__bg {
  position: relative;
  width: 100%;
  height: 60px;
  background: chocolate;
  border-bottom: 30px solid antiquewhite;
  z-index: 3;
}

.nav__bg:before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin-top: 30px;
  width: 100%;
  height: 2px;
  background-color: antiquewhite;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 3000px;
  background-color: antiquewhite;
  z-index: 1;
}

<div class="nav">
  <ul>
    <li>Меню</li>
    <li>Меню</li>
    <li>Меню</li>
    <li>Меню</li>
    <li>Меню</li>
  </ul>
</div>
<div class="nav__bg__start"></div>
<div class="nav__bg"></div>
<div class="wrapper"></div>

Или чуть проще:

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

ul,
li {
  list-style-type: none;
}

li {
  display: inline-block;
  margin: 0 20px;
  line-height: 60px;
  color: #222;
  font-family: sans-serif;
  text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.5);
}

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background: transparent;
  z-index: 4;
}

.nav__bg__start {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: burlywood;
  -webkit-box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.2);
  box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.2);
  z-index: 2;
}

.nav__bg {
  position: relative;
  width: 100%;
  height: 60px;
  background: chocolate;
  z-index: 3;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 3000px;
  background-color: antiquewhite;
  z-index: 1;
}

<div class="nav">
  <ul>
    <li>Меню</li>
    <li>Меню</li>
    <li>Меню</li>
    <li>Меню</li>
    <li>Меню</li>
  </ul>
</div>
<div class="nav__bg__start"></div>
<div class="nav__bg"></div>
<div class="wrapper"></div>

Answer 3

В общем этот эффект достигается css правилом: background-attachment: fixed

Смотрим демонстрацию в сниппете (прокручиваем контент);

https://codepen.io/topicstarter/pen/rNVygwL - здесь этот эффект с плавной прокруткой.

.wrap {
  width: 468px;
  margin: auto;
}

.flex {
  display: flex;
  justify-content: space-around;
}

.flex .item {
  color: #fff;
}

.item2 {
  padding: 50px 0;
  background: url(https://avatars.mds.yandex.net/get-pdb/931959/6771d4ee-38b2-4b72-9089-bf68f539868b/s1200);
  background-size: cover;
  background-attachment: fixed;
}

.item4 {
  padding: 50px 0;
  background: url(https://mensministrycatalyst.org/wp-content/uploads/2018/06/new-zealand-storm-900.jpg);
  background-size: cover;
  background-attachment: fixed;
}

p {
  font-size: 24px;
}

<div class="wrap">
  <div class="item1">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, cum officiis sapiente nostrum tenetur ipsa molestias? Vero minus explicabo rerum provident sed exercitationem sit minima. Illum tenetur maxime accusantium quidem!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, cum officiis sapiente nostrum tenetur ipsa molestias? Vero minus explicabo rerum provident sed exercitationem sit minima. Illum tenetur maxime accusantium quidem!
    </p>
  </div>
  <div class="item2">
    <div class="flex">
      <div class="item">20K</div>
      <div class="item">40k</div>
      <div class="item">50k</div>
    </div>
  </div>
  <div class="item3">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea optio sint iusto. Et, repellat dolorem iure quas totam alias praesentium numquam dignissimos dolore placeat! Praesentium quibusdam expedita optio et totam eius, illo non tenetur alias laborum
      culpa accusantium. Omnis, magnam.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, cum officiis sapiente nostrum tenetur ipsa molestias? Vero minus explicabo rerum provident sed exercitationem sit minima. Illum tenetur maxime accusantium quidem!
    </p>
  </div>
  <div class="item4">
    <div class="flex">
      <div class="item">tab</div>
      <div class="item">reverse</div>
      <div class="item">quote</div>
    </div>
  </div>
  <div class="item3">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea optio sint iusto. Et, repellat dolorem iure quas totam alias praesentium numquam dignissimos dolore placeat! Praesentium quibusdam expedita optio et totam eius, illo non tenetur alias laborum
      culpa accusantium. Omnis, magnam.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, cum officiis sapiente nostrum tenetur ipsa molestias? Vero minus explicabo rerum provident sed exercitationem sit minima. Illum tenetur maxime accusantium quidem!
    </p>
  </div>
</div>

БЛОГ НА HUSL

Как изменить фон меню при прокрутке страницы (CSS)

Ответы (3 шт):