Смена цвета текста при скролле

162
27 мая 2019, 21:50

У меня есть header.

Изначально все слова в нем черного цвета, но при скролле цвет должен меняться, как это можно сделать, есть может какие-то готовые решения?
Есть такая верстка, но отображается она плохо, т.к. она на бутстрапе.

.header_area { 
  left: 0; 
  position: absolute; 
  width: 100%; 
  z-index: 99; 
  top: 0; 
  padding: 0 4%; 
} 
 
.menu_area .navbar-brand { 
  font-size: 72px; 
  font-weight: 700; 
  color: #fff; 
  margin: 0; 
  line-height: 1; 
  padding: 0; 
} 
 
.menu_area .navbar-brand:hover, 
.menu_area .navbar-brand:focus { 
  color: #fff; 
} 
 
.menu_area { 
  position: relative; 
  z-index: 2; 
} 
 
.menu_area #nav .nav-link { 
  color: #fff; 
  display: block; 
  font-size: 16px; 
  font-weight: 500; 
  border-radius: 30px; 
  -webkit-transition-duration: 500ms; 
  -o-transition-duration: 500ms; 
  transition-duration: 500ms; 
  padding: 35px 15px; 
} 
 
.menu_area nav ul li>a:hover { 
  color: #fb397d; 
} 
 
.header_area.sticky { 
  background: rgb(0, 122, 223); 
  background: -webkit-linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%); 
  background: -o-linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%); 
  background: -ms-linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%); 
  background: linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%); 
  height: 70px; 
  position: fixed; 
  top: 0; 
  z-index: 99; 
} 
 
.header_area.sticky .menu_area .navbar-brand { 
  font-size: 50px; 
} 
 
.header_area.sticky .menu_area #nav .nav-link { 
  padding: 23px 15px; 
} 
 
.header_area.sticky .navbar { 
  padding: 0; 
}
<header class="header_area animated"> 
  <div class="container-fluid"> 
    <div class="row align-items-center"> 
      <div class="col-12 col-lg-10"> 
        <div class="menu_area"> 
          <nav class="navbar navbar-expand-lg navbar-light"> 
            <a class="navbar-brand" href="#"> 
              <img src="img/image.png" style="margin-top: -15px;width: 48px; height: 38px;"> 
            </a> 
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ca-navbar" aria-controls="ca-navbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> 
            <div class="collapse navbar-collapse" id="ca-navbar"> 
              <ul class="navbar-nav ml-auto" id="nav" style="margin-right: -220px;"> 
                <li class="nav-item active"><a class="nav-link" href="#home" style="color: #000;">Home</a></li> 
                <li class="nav-item"><a class="nav-link" href="#about" style="color: #000;">About</a></li> 
                <li class="nav-item"> 
                  <a class="nav-link" href="#features" style="color: #000;"></a>Text</li> 
                <li class="nav-item"><a class="nav-link" href="#application" style="color: #000;">Application</a></li> 
                <li class="nav-item"><a class="nav-link" href="#support" style="color: #000;">Support</a></li> 
                <li class="nav-item"><a class="nav-link" href="#contact" style="color: #000;">Contact</a></li> 
              </ul> 
            </div> 
          </nav> 
        </div> 
      </div> 
    </div> 
  </div> 
</header>

Как сделать, чтобы при скролле вниз текст был белым и картинка тоже, т.е чтобы фактически картинка заменялась с черной на белую?

Answer 1

Это всего лишь пример. Смысл в том, что при скролле, элемент header_area получает новый класс. А в css уже данному классу задаются нужные правила.

//document.querySelector('.header_area') так мы хватаем нужный элемент ('.header_area') в скобках может быть любой другой нужный элемент 
 
//document.body.onscroll = function(){} это функция в которой все происходит, что (грубо говоря) в нее засунешь, то и отработает при скролле. 
 
 
 
 
document.body.onscroll = function() { 
  document.querySelector('.header_area').classList.add('green') 
}
body { 
  height: 1000px; 
} 
 
.header_area { 
  position: sticky; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100px; 
  background: red; 
} 
 
.green { 
  background: green; 
}
<header class="header_area animated"> 
 
</header>

READ ALSO
Ссылка на viber не работает на устройстве mac

Ссылка на viber не работает на устройстве mac

Подскажите, почему данная ссылка работает только, если установлен вайбер на устройство? <a href="viber://chat?number=+1234567890">viber</a> Если не установлен...

150
Задержка перед переходом по ссылке

Задержка перед переходом по ссылке

Вообщем есть событие load, которое после полной загрузки страницы делает плавное opacity body,html с 0 до 1, вопрос в том что-бы сделать каждый клик по любой...

166
Стилизация ошибки required

Стилизация ошибки required

Сейчас при ошибке вылетает вот такое окно

148
Border css на половину круга

Border css на половину круга

Ребят,как сделать чтобы было из этого:

185