Я работаю на странице параллакса, используя Stellar.js, у меня есть несколько панелей паллакса, уложенных друг на друга, как это:
Я хочу гладкую прокрутку вверх для каждой панели, когда пользователь прокручивает страницу вниз и достигает этой области. Я имею в виду, что я хочу, чтобы скроллер был достаточно умным, чтобы выровнять каждую панель вверху экрана. Я пробовал это, но не работал:
h = $(window).height();
t = $('#parallaxtop').offset().top + $('#parallaxtop').height();
if(t > h) {
$(window).scrollTop(t - h);
}
И вот JSFiddle: http://jsfiddle.net/LDaUw/
Я нашел эту работу:
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 для плавной прокрутки.