Прокрутите до элемента, когда пользователь прокручивает сверху вниз

Question

Я пытаюсь сделать эффект, как на App Builder Website. Когда пользователь находится в заголовке с фоновым изображением/видео и прокручивает вниз, сайт прокручивается до следующего div/section/etc. ,
Если пользователь прокручивает резервную копию, а часть изображения/видео достигнута, страница прокручивается вверх.
Я попытался следующий код, но есть ошибка, я не могу найти:

function scrollto(where){ 
    $('html,body').animate({ scrollTop: $(where).offset().top - 65}, 800); 
    console.log('Scrolled to ' + where); 
    closeMenue(); 
} 


var lastScrollTop = 0; 
var scroll = $(window).scrollTop(); 
$(window).scroll(function(event){ 
var st = $(this).scrollTop(); 
if (st > lastScrollTop){ 
    if (scroll == 0){ 
    scrollto('.about'); 
    } 
    else{ 
    } 
} else { 
    if (scroll == 530){ 
    scrollto('.parallax'); 
    } 
    else{ 
    } 
} 
lastScrollTop = st; 
}); 

Это работает отлично, но только один раз. Есть ли плагин, который я могу использовать? Извините за мой плохой английский :(

Answer 1

Сайт, который вы опубликовали, использует fullPage.js plugin.

Он работает с использованием переходов CSS3 с возвратом в jQuery, когда это необходимо.

Если вы не хотите использовать jQuery, для него есть только pure javascript version, но он функциональный.

Answer 2

не использовать JQuery для плавных переходов. лучше делать вещи с методами CSS.

проверка this если хотите использовать любую библиотеку

Answer 3

Итак, вот что я считаю, Я вижу на своем сайте, если вы хотите сделать что-то подобное:

1. Нет полосы прокрутки, вы должны сделать свой самый верхний контейнер имеет переполнение: скрытый Это может быть лучше, чтобы захватить SCRo. ll колесо событий. См. Здесь для получения более подробной информации: Get mouse wheel events in jQuery?

2. Активное окно просмотра получает класс «active». Они, вероятно, используя его, чтобы отслеживать, какие VIEWPORT, чтобы перейти к следующему и, возможно, определить

Таким образом, в вашем прокрутки обработчика событий колеса, вам необходимо:

1. Определить первый если вы идете вверх или вниз. (Обозначается в ссылке SO выше)
2. Вам нужно будет найти следующий div/viewport/container/div/viewport/container, который неактивен.
3. Вы хотите переместить активный класс в соответствующий родственный (предыдущий/следующий в зависимости от вверх/вниз) и прокрутить его в поле зрения с помощью scrollTop.