Менять цвет линий и кругов при скроле вниз и обратно

Question

Нужно сделать так что бы при скроле линии меняли цвет(когда цвет фона черный то круги и линии белые) и менялся активный круг с Продукция на другой, (скролл вверх и обратно). Я начал писать на jquery, сделал что бы при скроле вниз менялся, но когда скролю вверх ничего не происходит. Буду благодарен любой помощи.

Answer 1

Вариант 1 — инверсия фона

body{
  margin: 0;
  padding: 0;
}

section{
  height: 80vh;
  background: #eee;
}

img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section:nth-of-type(odd){
  background: #222;
}

.scrollbar{
  position: fixed;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
}

.scrollbar .dot{
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.1);
  background: none;
  -webkit-backdrop-filter: invert(1);
  backdrop-filter: grayscale(1) contrast(100) invert(1);
  margin-bottom: 20px;
  z-index: 999999;
}

<section> </section>
<section> </section>
<section>
  <img src="https://cdn.pixabay.com/photo/2017/07/13/16/07/monkey-2500916_1280.jpg" alt="">
</section>
<section> </section>
<section>
  <img src="https://cdn.pixabay.com/photo/2020/06/10/07/05/yoga-5281457_1280.jpg" alt="">
</section>
<section> </section>
<section> </section>


<div class="scrollbar">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

БЛОГ НА HUSL

Менять цвет линий и кругов при скроле вниз и обратно

Ответы (1 шт):