滚动时根据背景颜色将导航文本和徽标颜色从白色反转为黑色/彩色？答案

【问题标题】：Invert navigation text and logo color from white to black/colored when scrolling depending on color of background?滚动时根据背景颜色将导航文本和徽标颜色从白色反转为黑色/彩色？
【发布时间】：2022-06-30 12:33:29
【问题描述】：

我对 js 比较陌生，最后设法创建了一个脚本（花了我 3 个小时的时间！:-D），当用户滚动过去时，它基本上反转了我的虚拟导航（文本/链接加上徽标图像）的颜色初始较暗的虚拟滑块部分，然后到具有白色背景的页面的其余部分。到目前为止，一切都很好。这是我的代码：

function logoSwitch () {
  $('.altLogo').each(function() {
    $(this).css('top',
      $('.startLogo').offset().top -  $(this).closest('.row').offset().top
    );
  });
};

$(document).scroll(function() {logoSwitch();});

logoSwitch();

* {
  padding: 0;
  margin: 0;
}

.row {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logo {
  top: 30px;
  width: 100%;

  transform-origin: left top 0;
}

.startLogo {
  position: fixed;
}

.altLogo {
  position: absolute;
}

.white {
  color: white;
}

.black {
  color: #1d1d1d;
}

.grey {
  background: #ccc;
}

.white {
  background: white;
}

.hero-black {
    background: #000;
}

.light {
  color: white;
}

.menu-link, .menu-logo {
  width: 20%;
  float: left;
  text-align: center;
}

.logo-image {
  width: 80px;
  margin-top: -7px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row hero-black">
<div class="logo light startLogo">
<div class="menu-logo"><img class="logo-image" src="https://newhomespain.com/wp-content/uploads/2016/11/footer-logo-white-small-compressed.png"></div> 
<div class="menu-link">Home</div> 
<div class="menu-link">Webshop</div> 
<div class="menu-link">About</div> 
<div class="menu-link">Contact</div> 
</div>
</div>

<div class="row white">
<div class="logo black altLogo">
<div class="menu-logo"><img class="logo-image" src="https://newhomespain.com/wp-content/uploads/2016/11/new-home-spain-hi-res-logo.png"></div> 
<div class="menu-link">Home</div> 
<div class="menu-link">Webshop</div> 
<div class="menu-link">About</div> 
<div class="menu-link">Contact</div> 
</div>
</div>

我现在有两个问题：

我必须从某个地方开始，所以我做了 - 但我现在看到脚本非常有限，只能影响两个类：“altLogo”（在白色背景上显示彩色徽标和黑色文本）和“startLogo”（显示深色背景上的白色徽标和文字）。这使得它非常僵化，我似乎无法想出一种方法来以一种智能的方式在我的网页的标题部分全局实现它。我怎样才能修改 scipt 以使其更灵活 - 而不是必须基本上在任何地方插入“altLogo”和“startLogo”？
在尝试了解如何编写迄今为止我最终编写的脚本时，我偶然发现了这个网站，它似乎以一种非常聪明的方式做到了这一点：

https://visibly.dk/

标题中的徽标和文本颜色会根据底层 div/背景的颜色而变化，并且可以在向下滚动时来回多次更改，假设我们有一个带有深色背景的深色部分，然后是一个新的浅色部分，然后是深色部分，然后是浅色部分。

有没有“简单”的方法来做到这一点？基本上是告诉脚本将导航文本更改为黑色并在背景为白色时使用彩色图像/徽标，如果背景为深色则恢复为所有白色文本和图像/徽标？

链接到我的小提琴：

https://jsfiddle.net/3srv0kg8/

【问题讨论】：

一种选择是使用CSS variable 来存储颜色，然后只需修改一个变量，并在整个页面中的任何需要的地方使用它。
这是显而易见的选择，是的，但我似乎想不出一种方法来实现这一点。我尝试将一个类添加到我的标题中，将另一个类添加到页面上的元素中，它的效果与我非常基本的小提琴中的效果不同。
我会尝试一下，看看能不能给你写一个有效的答案......
您需要一个交叉点观察器来实现您想要的，因为如果我理解正确，您想观察视口中当前的背景并相应地更改固定覆盖层（如导航栏等）的颜色...

标签： javascript html jquery css

【解决方案1】：

一种方法是创建两个类，一个浅色类和一个深色类。其中每一个都包含CSS property（又名变量）用于您的颜色。然后只需使用滚动位置根据需要切换类。

对于图像，您可以在同一代码块中切换src 属性，或使用filter: invert(1); 之类的东西来修改它的颜色。

对于微妙的动画，您也可以只使用 CSS：transition: all 0.25s ease;。

这是一个快速的demo，（距离我上次使用 jQuery 已经过去了大约 10 年，所以这部分可能还有一些改进的空间）。

$(window).scroll(function(){
const pageHeight = $(window).height();
  if($(window).scrollTop() > pageHeight){
    $('body').addClass('dark').removeClass('light')
  }else{
    $('body').addClass('light').removeClass('dark')
  }
});

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  transition: all 0.25s ease;
}

body.light {
  --foreground: #000;
  --background: #fff;
}
body.dark {
  --foreground: #fff;
  --background: #000;
}

body.dark img.logo-image {
  filter: invert(1);
}

div.outer {
  width: 100%;
  min-height: 400vh;
}

nav.top-bar {
  top: 0;
  display: flex;
  width: 100%;
  background: var(--background);
  position: fixed;
  border-bottom: 1px solid var(--foreground);
}

img.logo-image {
  width: 6rem;
}

a.menu-link {
  margin: 0.5rem;
  padding: 0.25rem;
  color: var(--foreground);
  border: 1px solid var(--foreground);
}

div.content {
  height: 100vh;
  border-bottom: 1px dashed var(--foreground);
}

div.content p {
 padding-top: 4rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="light">
<div class="outer">
  <nav class="top-bar">
    <img class="logo-image" src="https://newhomespain.com/wp-content/uploads/2016/11/new-home-spain-hi-res-logo.png">
    <a class="menu-link">Home</a> 
    <a class="menu-link">Webshop</a> 
    <a class="menu-link">About</a> 
    <a class="menu-link">Contact</a> 
  </nav>

    <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Donec sed odio operae, eu vulputate felis rhoncus. Salutantibus vitae elit libero, a pharetra augue. Nihil hic munitissimus habendi senatus locus, nihil horum? A communi observantia non est recedendum.
    </p>
  </div>
  <div class="content">
    <p>
      Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
    </p>
  </div>
  <div class="content">
    <p>
      A communi observantia non est recedendum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
    </p>
  </div>
</div>

</body>

附注：由于您找到了一个示例网站，它可以满足您的需求，因此您可以查看它的源代码以了解它的工作原理，然后在您的项目中复制该逻辑。

【讨论】：