Ufdjrw

I'm trying to let the user scroll to the bottom of a div of information, then freeze the div and have the next div scroll over it. I have tried ScrollMagic and waypoints, but neither is doing what I want. What happens is, when I reach the bottom of the history, the books div jumps to the top of the page. Anyone have any ideas please? The problem might partly to have to do with the fact that my first element, the video, has fixed positioning as well.

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 method:

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

waypoints method:

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'
 )