Reactjs 反作用弹簧&x2014；由于高度限制，包含导航和页脚的视差问题

我使用react spring的视差来创建视差效果。我知道可以使用其父对象的高度来设置其面积。然而，这种解决方案在滚动时会导致一种奇怪的行为，即在屏幕上保持和可见。我这里有几个问题：

如何以正常的方式设置此布局

我是否需要将和放置在具有固定高度的视差计算机中（我希望有更好的解决方案）

是否有一种方法可以使模型根据内部内容而不是使用支撑因子来假定其高度

先谢谢你

App.js

import React from "react";

import ParallaxComp from "./ParallaxComp";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <nav style={{ height: "5rem", background: "purple", color: "white" }}>
        Nav
      </nav>
      {/* <main style={{ height: "100%" }}> */}
      <main style={{ height: "100vh" }}>
        <ParallaxComp />
      </main>
      <footer style={{ height: "5rem", background: "blue", color: "white" }}>
        Footer
      </footer>
    </div>
  );
}

import React from "react";
import { Parallax, ParallaxLayer } from "react-spring/renderprops-addons";

let parallax;

const ParallaxComp = () => {
  return (
    <Parallax pages={2} scrolling={true} vertical ref={ref => (parallax = ref)}>
      <ParallaxLayer
        offset={0}
        speed={0.1}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M887 0c0 224.45-182.22 406.4-407 406.4S73 224.45 73 0h814z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#fec70e"
          />
        </svg>
      </ParallaxLayer>
      <ParallaxLayer
        offset={0}
        speed={-0.4}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M216 105.2c0 59.65-48.35 108-108 108S0 164.84 0 105.2h216z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#037e36"
          />
        </svg>
      </ParallaxLayer>
    </Parallax>
  );
};

export default ParallaxComp;

从“React”导入React；
从“/ParallaxComp”导入视差comp；
导入“/styles.css”；
导出默认函数App（）{
返回(
导航
{/*  */}
页脚
);
}

视差压缩比js

import React from "react";

import ParallaxComp from "./ParallaxComp";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <nav style={{ height: "5rem", background: "purple", color: "white" }}>
        Nav
      </nav>
      {/* <main style={{ height: "100%" }}> */}
      <main style={{ height: "100vh" }}>
        <ParallaxComp />
      </main>
      <footer style={{ height: "5rem", background: "blue", color: "white" }}>
        Footer
      </footer>
    </div>
  );
}

import React from "react";
import { Parallax, ParallaxLayer } from "react-spring/renderprops-addons";

let parallax;

const ParallaxComp = () => {
  return (
    <Parallax pages={2} scrolling={true} vertical ref={ref => (parallax = ref)}>
      <ParallaxLayer
        offset={0}
        speed={0.1}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M887 0c0 224.45-182.22 406.4-407 406.4S73 224.45 73 0h814z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#fec70e"
          />
        </svg>
      </ParallaxLayer>
      <ParallaxLayer
        offset={0}
        speed={-0.4}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M216 105.2c0 59.65-48.35 108-108 108S0 164.84 0 105.2h216z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#037e36"
          />
        </svg>
      </ParallaxLayer>
    </Parallax>
  );
};

export default ParallaxComp;

从“React”导入React；
从“react spring/renderprops插件”导入{Parallax，ParallaxLayer}；
让视差；
常数视差压缩=（）=>{
返回(
（视差=ref）}>
);
};
导出默认视差比较；