jQuery - плавная прокрутка страницы параллакса до определенных якорей с помощью колесика мыши

0

Я работаю на странице параллакса, используя Stellar.js, у меня есть несколько панелей паллакса, уложенных друг на друга, как это:

Изображение 174551

Я хочу гладкую прокрутку вверх для каждой панели, когда пользователь прокручивает страницу вниз и достигает этой области. Я имею в виду, что я хочу, чтобы скроллер был достаточно умным, чтобы выровнять каждую панель вверху экрана. Я пробовал это, но не работал:

h = $(window).height();
t = $('#parallaxtop').offset().top + $('#parallaxtop').height();
if(t > h) {
    $(window).scrollTop(t - h);
}

И вот JSFiddle: http://jsfiddle.net/LDaUw/

  • 0
    Если вы можете предоставить работающий иллюстративный JSFiddle, это было бы здорово!
  • 0
    Я только что добавил ссылку на страницу JSFiddle.
Показать ещё 1 комментарий
Теги:
parallax

1 ответ

0
Лучший ответ

Я нашел эту работу:

var pageH = $(window).innerHeight(); //grab window height
    $(window).scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            var eTop = $('#parallaxtop').offset().top; //get the offset top of the element
            var myOffset = eTop - $(window).scrollTop(); //determine the offset from window
            if (myOffset > -100 && myOffset < pageH/2) { //if the offset is less than the half of page scroll to the panel
                    $('#parallaxtop').ScrollTo({ //ScrollTo JQuery plugin
                    });
            }
        }, 250)); //this will be calculated 250ms after finishing every scroll
    });

Я использовал плагин ScrollTo JQuery для плавной прокрутки.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню