У меня есть 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>
Как сделать, чтобы при скролле вниз текст был белым и картинка тоже, т.е чтобы фактически картинка заменялась с черной на белую?
Это всего лишь пример. Смысл в том, что при скролле, элемент 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>
Подскажите, почему данная ссылка работает только, если установлен вайбер на устройство? <a href="viber://chat?number=+1234567890">viber</a> Если не установлен...
Вообщем есть событие load, которое после полной загрузки страницы делает плавное opacity body,html с 0 до 1, вопрос в том что-бы сделать каждый клик по любой...