Я пытаюсь создать эффект, при котором при прокрутке изображение слайдера будет прокручиваться вниз вместе со страницей с меньшей скоростью. Это похоже на параллакс, и хорошей демонстрацией будет этот сайт: http://escapeflight.com/
Если вы прокрутите страницу вниз, вы увидите эффект, о котором я говорю.
Мое приложение похоже, но у меня есть заголовок, который не исправлен. Код ниже:
header = $('header').height();
function setTopSlider(){
offset = window.pageYOffset;
//if we have scrolled down past the height of the header, we want to begin the 'parallax' effect
if(iScroll > header){
$('.slides').css('top',(offset/3))
}else{
$('.slides').css('top',0);
};
};
$(window).scroll(function () {
setTopSlider();
});
Это работает, но когда вы прокручиваете высоту заголовка, значение css .slides
переходит вниз к рассчитанному значению. Мне нужна помощь с этим расчетом offset/3
, чтобы, когда вы достигаете верхней части ползунка, не было скачка - он просто начинал прокручиваться вниз, но с другой скоростью, чем остальная часть страницы.
Повторюсь, мне нужно, чтобы ползунок прокручивался медленнее, чем остальная часть страницы, поэтому я использую описанную выше технику, чтобы «подделать это», установив его «верхнее» положение, которое вычисляется текущим pageYOffset
. Любые идеи?