根据背景更改固定链接颜色

Question

我希望我的侧边固定链接在滚动时更改其颜色，具体取决于背景颜色。如果背景为白色 - 则将链接颜色更改为 #000，否则为 #fff。 我尝试了 CSS mixed-blend-mode: difference，但没有控制颜色的选项。所以我想用jquery来做。我怎样才能做到？

这是我的代码示例

.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: 50vh;
}
.wrapper div:nth-child(2n+1) {
  background: green;
}

<div class="wrapper">
  <div></div>
  <div class="white"></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

为您的文档添加滚动监听器并使用以下代码：

$document.scroll(function() {
  if ($document.scrollTop() >= 50) {
    // After the user reaches to position, this code will change text color.
    $("element").addClass("blackColor");
  } else {
    $("element").removeClass("whiteColor");
  }
});

Answer 2

它对我有用：

$(window).scroll(function(){
  $('.aside-link').each(function(){
    var fixed = $(this);

    var fixed_position = $(".aside-link").offset().top;
    var fixed_height = $(".aside-link").height();

    var addClass = false;
    $('.white').each(function(){

        var toCross_position = $(this).offset().top;
        var toCross_height = $(this).height();

        if (fixed_position + fixed_height  < toCross_position) {
            //fixed.removeClass('white');
        } else if (fixed_position > toCross_position + toCross_height) {
            //fixed.removeClass('white');
        } else {
            addClass = true;
        }
    });
    if(addClass == true){
        fixed.addClass('dark');
    }else{
        fixed.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;
}
.aside-link.dark {
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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 aside-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 aside-link" title="contacts">
<span uk-icon="icon: instagram"></span>
<span class="phone-vertical">instagramaccount</span>
</a>
</li>

</ul>
</nav>

</aside>