2

Задача такая - сделать динамически изменяющий цвет навбар, взависимости от высоты он должен плавно менять цвет... это ведь js (jquery) - за что мне зацепиться и что использовать??

1 ответ 1

2

В самом общем виде - отслеживаете прокрутку страницы и в зависимости от того, сколько прокручено, меняете цвет:

$(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>

1
  • крутяк) спасибо большое) возьму на вооружение)))
    – Илья
    12 апр 2019 в 15:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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