在高速滚动时固定Div跳转

Question

我正在为图像滚动效果，但我的动画并不是那么流畅。我的主要部分是在高速滚动时固定跳跃。你可以在这里看到它：http://it-shirts.com/simascroll/

HTML：

<div class="gallery-overlay pre-scroll">
    <div class="gallery-overlay-background"></div>
    <div class="gallery-overlay-foreground"></div>
</div>

CSS：

.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;
}

JS：

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;
    }
}

在我的代码中，div只被修复一次（它不会在每个window.onscroll事件上重新修改），但它没有帮助。