I have a header .

Initially, all the words in it are black, but when scrolling, the color should change, how can this be done, can there be any ready-made solutions?
There is such a layout, but it is displayed poorly, because she's on the bootstrap.

 .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>

How can I make the text white when scrolling down and the picture too, that is, in fact, the picture is replaced from black to white?

  • It should be on Bootstrap, or rather it should be reflected normally .... It is not quite clear, do you want everything to work on Bootstrap, or do you need to redo it without it? - LFC
  • @ on it, I just can not throw it off, big too - Juicy134
  • Why throw it off? Everyone knows what a Bootstrap is. You will need a little JS. I’m still busy until the evening, if no one answers, I will briefly tell you what to do and how. - LFC
  • @VladSpirin, ok, thanks - Juicy134

1 answer 1

This is just an example. The point is that when scrolling, the header_area element gets a new class. And in css , the necessary rules are set for this class.

 //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>

  • I initially have the color of words black, after scrolling, they become white. and here the background is just originally a different color is made. How to change the color of the words when scrolling for example, like here: colorlib.com/preview/#massive Initially, the header merges and the text is white and after the scroll you need black for example. I just do not know how to implement - Juicy134
  • @ Juicy134, wrote a little explanation in response ... If you are not familiar with JS , then forgive me, then no one will write for you as you need, and if at least there is a little knowledge of JS then from the example you can understand how and what - Air