Задача такая - сделать динамически изменяющий цвет навбар, взависимости от высоты он должен плавно менять цвет... это ведь js (jquery) - за что мне зацепиться и что использовать??
1 ответ
В самом общем виде - отслеживаете прокрутку страницы и в зависимости от того, сколько прокручено, меняете цвет:
$(window).scroll(function(){
if($(this).scrollTop() >=500 && $(this).scrollTop() < 1200) {
$('nav').css('background-color','green')
}
else if($(this).scrollTop() >= 1200) {
$('nav').css('background-color','red')
}
else {
$('nav').css('background-color','blue')
}
})
* {
padding: 0;
margin: 0;
}
body {
height: 2000px;
}
nav {
text-align: center;
background-color: blue;
color: white;
position: fixed;
width: 100%;
padding: 10px;
transition: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>меню</nav>