javascript - ReactJS 根据滚动到具有动态高度的部分更改导航栏颜色

Question

我刚开始使用 ReactJS。我目前想在用户滚动到不同部分时更改我的导航栏颜色。例如，我的第一部分是红色，第二部分是绿色，然后我的第三部分是蓝色。我想让 Nav 知道，一旦用户输入/滚动到第 1 部分，它将改变颜色，使颜色变为红色，第 2 部分和第 3 部分也是如此。

我现在是用window.scroll来实现这个功能的。

const changeBackground = () => {
if(window.scrollY >= 898 && window.scrollY <= 1997){
  //section = '1'
  setColor('red')
}
else if(window.scrollY >= 1998 && window.scrollY <= 3097) {
  //section = '2'
  setColor('green')

}
else if(window.scrollY >= 3098) {
  //section = '3'
  setColor('blue')
}

我目前的问题是我的高度是固定的，所以第 1 部分在 898 到 1997 像素之间。但是我想将高度设置为 100vh，以便每个部分填满屏幕，并且基于 100vh，px 将根据用户屏幕大小而有所不同。

让导航知道它现在在哪个部分有什么想法/提示吗？

非常感谢!快乐编码。

Answer 1

一种可能的解决方案是使用 intersectional observers .它们允许我们观察元素何时可见。我们可以设置一个阈值，以确保它仅在给定比率可见时触发。

您可以使用 react-intersection-observer钩子(Hook)检查每个部分是否在 View 中，一旦它们在 View 中，您就可以使用该状态更改导航栏颜色。

您可以在以下沙箱中对此进行测试: https://codesandbox.io/s/competent-rubin-nhqz6

此代码尚未准备好生产，但您应该能够了解我们如何使用交集观察器。

import "./styles.css";
import React from "react";
import { useInView } from "react-intersection-observer";

export default function App() {
  const [section1Ref, section1InView] = useInView({ threshold: 0.5 });
  const [section2Ref, section2InView] = useInView({ threshold: 0.5 });

  return (
    <div className="App">
      <nav
        className="NavBar"
        style={{
          backgroundColor: section1InView
            ? "red"
            : section2InView
            ? "blue"
            : "green"
        }}
      />
      <div className="Container">
        <section className="Section" ref={section1Ref}>
          Section 1
        </section>
        <section className="Section" ref={section2Ref}>
          Section 2
        </section>
        <section className="Section">Section</section>
      </div>
    </div>
  );
}

样式表只是将高度设置为 100vh 减去页眉高度。它确保卷轴按预期工作。

.NavBar {
  width: 100%;
  height: 20px;
  background-color: red;
}

.Container {
  height: calc(100vh - 20px);
  overflow-y: scroll;
}

.Section {
  height: calc(100vh - 20px);
  border-bottom: 2px solid black;
}