0

У меня есть 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>

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

4
  • На Bootstrap он должен, точнее обязан отражаться нормально.... Не совсем понятно, вы хотите чтоб все работало на Bootstrap, или же переделать без него?
    – user262779
    4 дек 2018 в 12:58
  • @на нем, просто его скинуть не могу, большой слишком
    – Juicy134
    4 дек 2018 в 13:04
  • А зачем его скидывать? Все знают что такое Bootstrap. Вам JS нужен будет немного. Я пока-что занят до вечера, если никто не ответит, я вам вкратце расскажу, что и как делать.
    – user262779
    4 дек 2018 в 13:06
  • @VladSpirin, окей, спасибо
    – Juicy134
    4 дек 2018 в 13:07

1 ответ 1

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>

2
  • у меня изначально цвет слов черный, после скролла они становятся белыми. а тут бэкграунд просто изначально другой цвет сделан. как только цвет слов изменить при скролле? например как тут: colorlib.com/preview/#massive Изначально header сливается и текст белый а после скролла нужен черный например. просто не знаю как реализовать
    – Juicy134
    4 дек 2018 в 15:10
  • @Juicy134, написал маленькое пояснения в ответе... Если ты вообще не знаком с JS,то уж прости, тут за тебя ни кто не будет писать так как тебе надо, а если хотя бы чуть-чуть есть познание в JSто из примера можно понять как и что
    – Air
    4 дек 2018 в 15:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.