反应 - 根据窗口内的位置删除图像

Question

我在我的应用后台运行了一个视频。问题是当你一直走到网站的底部时，如果你过度滚动，视频会从下面戳出来。我不需要从应用程序的其余部分看到视频峰值。

我在React，所以这有点棘手。我试过这个：

let styles = "video-foreground"

function parallax(){  
    let ypos = window.pageYOffset; 
    if(ypos > 420) {
        styles = "video-blackout"
    } else {
        styles = "video-foreground"
    }
}

window.addEventListener('scroll', parallax);

CSS

 .video-blackout {
   display: none; 
 }

“styles”是我放在视频上的风格。但这不行。它有时不会摆脱视频几秒钟。其他时候，在您向后滚动几秒钟后，它不会将视频恢复。我不确定为什么会发生延迟，但确实如此。

有更好的方法吗？

Answer 1

这很有用。注入风格造成了延迟。直接工作。

function parallax(){  
    let ypos = window.pageYOffset; 
    if(ypos > 420) {
        document.getElementById('banner').style.display = 'none'; 
    } else {
        document.getElementById('banner').style.display = 'block'; 
    }
}

window.addEventListener('scroll', parallax);