Не могу закрепить с помощью ScrollMagic

Я не могу, на всю жизнь, заставить работать простую булавку с помощью ScrollMagic. Я не знаю, что я делаю неправильно. Веб-сайт в его нынешнем виде не может быть проще, но когда я пытаюсь добавить один пин в div, он не работает. Я потратил часы, пытаясь понять это, но все же я здесь.

https://jsfiddle.net/v0z9hb6c/

Мой JS-код:

var controller = new ScrollMagic.Controller();
var pinIntroScene = new ScrollMagic.Scene({
    triggerElement: '#intro',
    triggerHook: 0
})
.setPin('#intro')
.addTo(controller);

В настоящее время я застрял в точке, где все, что я вижу, - это вводная часть. Пожалуйста помоги!


javascript scrollmagic
person Abhinav Bhatta    schedule 27.09.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно указать продолжительность. Например, "100%" закрепит его на том же значении, что и высота контейнера.
Длительность по умолчанию равна 0, поэтому элемент будет откреплен только в том случае, если пользователь прокрутит назад за начальную позицию. Поскольку ваш элемент находится вверху страницы, я думаю, именно поэтому вы не видите закрепления.

https://jsfiddle.net/pm1vc7oh/27/

var controller = new ScrollMagic.Controller();
var pinIntroScene = new ScrollMagic.Scene({
    triggerElement: '#intro',
    triggerHook: 0,
    duration: "100%" // can also be 300 (for 300px)
})
.setPin('#intro')
.addTo(controller);
person Shano    schedule 30.09.2019