根據背景更改固定鏈接顏色

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>