-2

Есть такой пример:

.fixed {
  width: 100%;
  height: 50px;
  background-color: #f8f8f8;
  position: fixed;
}
.active {
  float: left;
  background-color: #54a58b;
  padding: 16px;
  border-right: 1px solid;
  border-color: #000;
}
.neactive {
  float: left;
  padding: 16px;
  border-right: 1px solid;
  border-color: #000;
}
<div class="fixed">
  <div id="1" class="active">200px</div>
  <div id="2" class="neactive">400px</div>
  <div id="3" class="neactive">600px</div>
  <div id="4" class="neactive">800px</div>
</div>
content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>

Как сделать так, чтобы при прокрутке на 400px, другой div стал active, при прокрутке 600 - другой стал active и т.д. ?

3
  • 2
    Это вы нам задание даете?) Думаю вам лучше конкретизировать проблему: указать, что вы уже пробовали сделать и что именно не получилось 25 дек 2015 в 20:49
  • @DmitriySimushev человек эвент скролла ищет. но по мнению закрывающих, "нельзя дать лаконичный ответ" о том, как обработать скролл.
    – user177221
    26 дек 2015 в 10:34
  • 3
    @PashaPash, если бы человек искал эвент скролла, то в вопросе так и было бы написано. А сейчас это вопрос вида "сделайте за меня". И да, в текущем виде от он не конкретен. 26 дек 2015 в 20:36

1 ответ 1

1

Обработайте событие скролла (например, через jQuery .scroll(...)). В обработчике проверьте смещение скролла и поменяйте класс у соответствующего div.

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