滚动div，将其固定在底部，然后在其上滚动下一个div

Question

我正在尝试让用户滚动到信息div的底部，然后冻结div并在其上滚动下一个div。我已经尝试过ScrollMagic和航点，但都没有做我想要的事情。发生的是，当我到达历史的底部时，books div跳到了页面的顶部。有人有什么想法吗？问题可能部分与我的第一个元素（视频）的位置也固定有关。

html：

<div id="video-bg" ><!-- a fixed position background video -->
    <video autoplay muted loop id="">
      <source src="video/loop2.mp4" type="video/mp4">
    </video>
    <!-- some stuff here like the title that goes over the video -->
</div>

<div class="screen position-down-1-screen auto-height" id="history">
    <!--a big page of history information-->
</div>  

<div class="screen" id="books">
    <!-- a big image that takes up the whole screen-->
    <img src="img/page-of-books.jpg" /> 
</div>

css：

#video-bg {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        height: 100%;
    }

    #video-bg > video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }
.screen {
    position: relative;
    width: 100%;
    height: 100%;
    margin: -2px auto 0 auto;
    display: inline-block;
}
.position-down-1-screen {
    margin-top: 100%;
}
.auto-height {
    height: auto;
}
#books {
    margin-top: 100vh; /* do I need this?? */
}
.stuck-bottom { /* is this right? */
   position:fixed;
   bottom:0;
}

ScrollMagic方法：

var scene = new ScrollMagic.Scene({ //have books go over history
            triggerElement: "#history",
            duration: length, //no idea what to put here
            triggerHook: 0,
        }).setPin("#history")
        .addTo(controller); 

航点方法：

var waypoint = new Waypoint({
      element: document.getElementById('history'),
      handler: function(direction) {
        //alert('Bottom of element hit bottom of viewport')
        if (direction == 'down') {
            $('#history').addClass('stuck-bottom');
        }
        if (direction == 'up') {

        }
      },
      offset: 'bottom-in-view'
    })