Как изменить цвет фиксированного элемента при скролле до элемента с классом?

Question

Хочу сделать так, чтобы две боковые ссылки с position:fixed меняли цвет на черный, если они находятся над div-ми с классом white. Как это сделать? Подскажите пожалуйста?

$(window).scroll(function () {
    if ($(".right-aside__menu-item-link").offset().top < ($(".white").offset().top)) {
        $(".right-aside__menu-item-link").addClass('dark');
    } else {
        $(".right-aside__menu-item-link").removeClass('dark');
    }
});

.right-aside {
    position: fixed;
    z-index: 10;
    right: -10px;
    top: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 180px;
    padding: 0; 
    font-size: 16px;
    line-height: 21px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    color: #fff;
    text-transform: uppercase;
    float:left;
    height: fit-content;
    }
.right-aside__menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.right-aside__menu ul li a {
    display: block;
    text-align: center;
    transition: all 300ms;
    color: #fff;
}

.left-aside {
    position: fixed;
    z-index: 10;
    left: -10px;
    top: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: fit-content;
    padding: 0; 
    font-size: 16px;
    line-height: 21px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    color: #fff;
    text-transform: uppercase;
    float:left;
    }
.left-aside__menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.left-aside__menu ul li a {
    display: flex;
    text-align: center;
    transition: all 300ms;
    color: #fff;
}
.left-aside__menu-item-link .uk-icon {
    margin-right: 10px;
    min-width: 20px;
}
.wrapper {
  height: 100%;
}
.wrapper div {
  height: 100vh;
}
.wrapper div:nth-child(2n+1) {
  background: green;
}
.right-aside__menu-item-link.dark {
  color: #000;
}

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

<div class="wrapper">
  <div></div>
  <div class="white" id="test"></div>
  <div></div>
  <div class="white"></div>
  <div></div>
</div>
<aside class="right-aside">
<nav class="right-aside__menu">
<ul class="right-aside__menu-list">

<li class="right-aside__menu-item ">
<a href="" class="right-aside__menu-item-link" title="phone">
<span class="right-aside__menu-icon">

</span>
<span class="phone-vertical">+7 777 777 77 77</span>
</a>
</li>

</ul>
</nav>

</aside>    
    <aside class="left-aside">
<nav class="left-aside__menu">
<ul class="left-aside__menu-list">

<li class="left-aside__menu-item ">
<a href="https://www.instagram.com/" class="left-aside__menu-item-link" title="contacts">
<span uk-icon="icon: instagram"></span>
<span class="phone-vertical">instagramaccount</span>
</a>
</li>

</ul>
</nav>

</aside>

Answer 1

Возможно вам подойдет mix-blend-mode: difference ? Правда там цвет зависит от фона всегда, не только белый и черный.

.fixed {
  position: fixed;
  color: #fff;
  mix-blend-mode: difference;
  font-size: 60px;
}

.section {
  height: 300px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.white {
  background: white;
}

.black {
  background: black;
}

<div class="fixed">test</div>
<div class="section red"></div>
<div class="section green"></div>
<div class="section blue"></div>
<div class="section white"></div>
<div class="section black"></div>

БЛОГ НА HUSL

Как изменить цвет фиксированного элемента при скролле до элемента с классом?

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