Не могу понять, с помощью чего и как можно реализовать, такую же фишку, как например на этом сайте https://www.justinmind.com , изначально шапка загружается одним цветом, а потом при смещении она его меняет. Как это сделать?
2 ответа
С помощью скрипта, который при скролле добавляет/удаляет специальный класс, меняющий внешний вид шапки:
$(window).scroll(function(){
if($(this).scrollTop() > 10) {
$('header').addClass('fixed');
}
else {
$('header').removeClass('fixed');
}
});
* {
padding: 0;
margin: 0;
}
body {
height: 1000px;
}
header {
text-align: center;
padding: 15px 0;
background-color: red;
color: white;
}
header.fixed {
position: fixed;
top: 0;
width: 100%;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
шапка
</header>
Еще один вариант jQuery. Плюс небольшая анимация перехода с одного цвета в другой с помощью свойства transition
.
$(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: #f1f1f1;
transition: background 2s;
}
.nav__color {background: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav"></div>