Доскроллив до конца страницы должен произойти переход на следующую страницу с задержкой. Сайт пример , но тут все на ангуляре и не понятно.
Делаю так, при "доскролле" начинает срабатывать (если срабатывает) setTimeout и переход, если в это время начать скроллить вверх, переход должен отменяться:
var scrollY = $(window).scrollTop(),
currentOffset = scrollY + window.innerHeight,
element = $('footer'),
bg = $('.next-route__overlay'),
offset = element.offset().top,
adress = $('.route-link').data('link'),
timeout,
show = false;
console.log(offset + ' ' + currentOffset);
$(window).scroll(function(){
if(offset <= $(window).scrollTop()+window.innerHeight){
show = true;
bg.show();
timeout = setTimeout(window.location.replace(adress), 5500);
}else {
show = false;
clearTimeout(timeout);
}
});
main {
height: 2000px;
background: #ccc;
}
footer {
padding: 1rem;
text-align: center;
}
.next-route__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 4rem;
background: #000;
opacity: .5;
display: none;
}
Вопрос: как можно осуществить автоматический переход на следующую страницу "доскроллив" до конца страницы средствами jquery (js), но при обратном сролле переход должен отменяться?
Ответ
в вашем коде две проблемы.
в качестве аргумента setTimeout вы пишите выражение, в данном случае оно вычисляется сразу, т.к. это не ссылка на функцию, а ее вызов. Вам следует использовать функцию, внутри которой уже будет заменен location
Событие скролла вызывается постоянно, в итоге вы несколько раз подряд взываете setTimeout каждый раз генерируется новый хэндл. Когда же вы начинаете крутить вверх, то очищаете только последний сгенерированный таймаут, а предыдущие созданные остаются и срабатывают. Поэтому назначать новый setTimeout нужно только в том случае, если он еще не вызыван.
var scrollY = $(window).scrollTop(),
currentOffset = scrollY + window.innerHeight,
element = $('footer'),
bg = $('.next-route__overlay'),
offset = element.offset().top,
adress = $('.route-link').data('link'),
timeout = null,
show = false;
console.log(offset + ' ' + currentOffset);
$(window).scroll(function(){
if(offset <= $(window).scrollTop()+window.innerHeight){
show = true;
bg.show();
if(!timeout){
timeout = setTimeout(function(){
window.location.replace(adress);
}, 5500);
}
}
else {
show = false;
clearTimeout(timeout);
timeout = null;
}
});
main {
height: 2000px;
background: #ccc;
}
footer {
padding: 1rem;
text-align: center;
}
.next-route__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 4rem;
background: #000;
opacity: .5;
display: none;
}
Комментариев нет:
Отправить комментарий