Прокрутите div, приклейте его к нижней части, затем прокрутите следующий div - PullRequest
Новая
       38

Прокрутите div, приклейте его к нижней части, затем прокрутите следующий div

0 голосов
/ 08 марта 2019

Я пытаюсь позволить пользователю прокрутить до нижней части div информацию, затем заморозить div и сделать следующий прокрутку div по нему. Я пробовал ScrollMagic и путевые точки, но ни один не делает то, что я хочу. Что происходит, когда я достигаю дна истории, 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'
    })
...