Трекинг положения пользователя в скролл-панели

Пример реализации:

Алгоритм действий:

1. Создаем скролл панель в курсе и наполняем контентом

2. Добавляем код ниже с условием запуска "когда стартует таймлайн слайда"

var x = document.getElementsByClassName("scrollarea-area");

$(window).resize(function(){
var newHeight = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
var height = newHeight;
player.SetVar("height",newHeight);
});

x[0].onscroll = function(){
var height = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
player.SetVar("num",x[0].scrollTop/height*100);
player.SetVar("height",height);
};

3. Добавляем переменные height и num в курс. height покажет вам максимальную высчитанную высоту скролла. Поиграйтесь с размером окна и увидите, что высота оперативно пересчитывается. num покажет вам процент докуда долистал скролл пользователь. Переменная изменяется от 0 до 100. Соответственно вы можете проектировать свои анимации, интерактивы и т.д. исходя из этого значения. Например, когда значение станет 20 запустить анимацию такого-то блока. Когда значение станет 100 - разблокировать кнопку перехода дальше и т.д.

4. Подключаем библиотеку JQuery. Как это сделать описано в официальном сайте Articulate и есть аж 3 способа. Выбирайте любой удобный вам метод. Я пошел путем оффлайн работы (скачал либу с сайта, закинул в папку проекта и прописал путь к ней в story.html).