Javascript 当固定在高速滚动时，Div跳转

我正在制作一个图像滚动效果，但我的动画不是很平滑。当我固定在高速滚动时，我的主要div是跳跃。你可以在这里看到它的作用：

HTML:

JS:

var-foreground=document.querySelector（'.gallery-overlay-foreground'），
背景=document.querySelector（“.gallery overlay background”），
gallery=document.querySelector（'.gallery overlay'）；
前台.topPosition=前台.getBoundingClientRect（）.top；
background.topPosition=background.getBoundingClientRect（）.top；
gallery.topPosition=gallery.getBoundingClientRect（）.top；
var-isOnScroll=false；
window.onscroll=函数（）{
var scrolled=window.pageYOffset；
如果（滚动>=gallery.topPosition）{
如果（！isOnScroll）{
$（'.gallery overlay'）.addClass（'滚动'）；
console.log（'func works'）；
isOnScroll=true；
}
前台.topPos=前台.getBoundingClientRect（）.top；
background.topPos=background.getBoundingClientRect（）.top；
如果（前台.topPos HTML结构？
滚动
未定义..什么DIV？我在你的页面中看不到固定DIV？我想我看到了中间的图片跳跃…你需要实现什么？我添加了HTML/CSS并错过了var滚动表达式。我正在尝试在高速滚动时实现平滑的动画，而没有固定DIV跳跃。完全像e在这里
<div class="gallery-overlay pre-scroll">
    <div class="gallery-overlay-background"></div>
    <div class="gallery-overlay-foreground"></div>
</div>

.gallery-overlay {
    width:100%;
    height: 200vh;
    position: relative;
    overflow:hidden;
}

.gallery-overlay-background {
    top: 0px;
    left: 0px;
    background-image: url(images/photogr2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width:100%;

}

.gallery-overlay-foreground {
    background-image: url(images/photogr.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    position: relative;
    z-index:100;
    width:100%;
    margin-top:100vh;
}


.pre-scroll .gallery-overlay-background { 
    position:absolute;
}

.on-scroll .gallery-overlay-background {
    position: fixed !important;
}

.post-scroll .gallery-overlay-background {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
}

var foreground = document.querySelector('.gallery-overlay-foreground'),
    background = document.querySelector('.gallery-overlay-background'),
    gallery = document.querySelector('.gallery-overlay');

foreground.topPosition = foreground.getBoundingClientRect().top;
background.topPosition = background.getBoundingClientRect().top;
gallery.topPosition = gallery.getBoundingClientRect().top;

var isOnScroll = false; 

window.onscroll = function() {
    var scrolled = window.pageYOffset;
    if (scrolled >= gallery.topPosition) {  
        if (!isOnScroll) {
            $('.gallery-overlay').addClass('on-scroll');
            console.log('func works');
            isOnScroll = true;
        }

        foreground.topPos = foreground.getBoundingClientRect().top;
        background.topPos = background.getBoundingClientRect().top;

        if (foreground.topPos <= background.topPos ) {
            $('.gallery-overlay').addClass('post-scroll');
        }

    }  else {
        // console.log('ELSE');
        $('.gallery-overlay').addClass('pre-scroll');
        $('.gallery-overlay').removeClass('on-scroll');
        $('.gallery-overlay').removeClass('post-scroll');
        isOnScroll = false;
    }
}