将固定内容移动到100vh组件的下方和上方

Moving fixed content below and above a 100vh component(将固定内容移动到100vh组件的下方和上方)

问题描述

目前，我的屏幕中心有一个固定的图像，它在鼠标滚动时水平移动。我现在想在这个组件的上方和下方添加一个高度为100vh的屏幕。当我尝试这样做时，我的固定组件会自动移动到我想清空的屏幕顶部。我曾尝试向图像添加页边距顶部：100vh，但已将其移出屏幕。

这里有两件事我有问题。1是如何在100vh窗口之后将此组件放在屏幕中央，2是如何仅在用户到达该特定组件时启动动画。因为现在设置项目时，图像和文本会在用户滚动上移动，所以如果我在上面添加一个100vh的屏幕，则用户滚动已经开始，这将启动我的动画。

CodeSanbox(全屏查看更好的参考)：https://codesandbox.io/s/interesting-bouman-lokt5?file=/src/App.js

编码：

{/* <div style={{height:"100vh"}}></div> *