我正在建设一个有很多图片的网站。在侧边栏是一个文本（它留在位置：粘粘的地方），我希望它改变它的颜色从黑色到白色，而重叠的图像，它通过滚动向下的网页。如何做到这一点？

我找到了一个codepen-示例，正是这样做的。但是提取所请求的代码很复杂，因为Javascript还处理滚动动画。 https://codepen.io/atise/pen/wnomyxy

我的sidenav函数如下：https://codepen.io/clairecodes/pen/bvwkdr

虽然t，但我已经给了它一秒钟：这种方法的问题是，当垂直滚动其长度时，它不能在普通网站上工作。白色文本应仅在Navbar接近时可见。为此，图像需要有一个触发器，该触发器仅在Navbar.

<div class="outer-container">
    <div class="image-container" style="background-image: url('https://images.unsplash.com/photo-1570528812862-9984124e7e22?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
    
    <style>
      body {
     margin: 0;
     min-height: 3000px;
     font-family: 'Montserrat', sans-serif;
}
 .outer-container {
     max-width: 600px;
     margin: auto;
     width: 90%;
     padding: 200px 0px;
     position: relative;
}
 .image-container {
     padding-bottom: 100%;
     background: black;
     position: relative;
     overflow: hidden;
     z-index: 2;
     background-size: cover;
     background-position: center;
}
 .section-title {
     margin: 0;
     font-size: 64px;
     width: 100%;
     text-align: center;
     position: absolute;
     top: 50%;
     left: -30%;
     transform: translateY(-50%);
     z-index: 1;
     white-space: nowrap;
}
 .section-title.on-dark {
     color: white;
}
 .section-title span {
     position: relative;
     display: block;
}
    </style>
    
        <h2 class="section-title on-dark">
            <span class="paralax-title">
                Live The Adventure
            </span>
        </h2>
    </div>
    
    <h2 class="section-title">
        <span class="paralax-title">
            Live The Adventure
        </span>
    </h2>
</div>

    <script>
      let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');

const scrollInProgress = () => {
    didScroll = true
}
const raf = () => {
    if(didScroll) {
        paralaxTitles.forEach((element, index) => {
            element.style.transform = "translateX("+ window.scrollY / 10 + "%)"
        })
        didScroll = false;
    }
    requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress)
    </script>

顺晟科技：

您可能正在寻找。

还有其他值。阅读MDN docs并查找最适合您的网站的值。