Javascript 在React.js中滑动菜单以显示视差背景图像

我试图创建一个菜单，当打开时会显示页面的背景图像。背景图像需要是视差图像，因此如果用户在菜单打开时滚动，他可以看到背景图像以较慢的速度滚动

该菜单基本上应该像一个“x射线”，因为它会显示隐藏的背景图像时，点击

使用本教程，我成功地获得了整个背景上的视差：。但它适用于整个页面

这就是我到目前为止所拥有的。。（注意，请在inspect模式下以mobile模式查看..因为我首先是为mobile设计的。不过，我希望在桌面版本中也具有该功能）

菜单代码：

const SolitudeMenu = () => {
return {
position: 'fixed',
left: '0',
top: '12vh',
width: '50vw',
height: '80vh',
backgroundColor: 'green',
color: '#445641',
fontFamily: 'monotype-grotesque,sans-serif',
fontSize: '.75rem',
textTransform: 'uppercase',
transform: open ? 'translateX(0)' : 'translateX(-100%)',
transition: 'transform 0.3s ease-in-out',

代码以使菜单滑出

const [open, setOpen] = useState(false)

  return (
    <div className='header-style'>
    <div className='burger' onClick={() => setOpen(!open)}> 
        <FontAwesomeIcon icon={faGripLines} />
    </div>

---

碰撞有人有什么想法吗？

const [offsetVerticalScroll, setOffsetVerticalScroll] = useState(0);
const handleScroll= () => setOffsetVerticalScroll(window.pageYOffset);

useEffect(() => {
    window.addEventListener('scroll', handleScroll); 
    return () => window.removeEventListener("scroll", handleScroll);

        }, []); 

return (
    <div>
    <Header />
    <div className="parallax-bg"style = {{ transform: `translateY(${offsetVerticalScroll * 0.5 }px)` }}/>

.parallax-bg {
    width: 100%;
    height: 400vh; 
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    background-image: url('images/background.jpg');
    z-index: -1;
}