Здравствуйте.
Есть на странице листалка блоков с интервалом и по клику на кнопки. Было желание, чтобы автопролистывание останавливалось при наведении, и когда блок уходит из области видимости. Это удалось реализовать. А вот что не получилось - так это сделать, чтобы автопролистывание автоматически возобновлялось при возвращении блока в область видимости.
Вот собственно сайт -
http://labm.format23.ru, и речь идёт о самом верхнем блоке с большими фоновыми изображениями.
Вот код
var interval, timer = 7300;
function startInterval() {
interval = setInterval(function(){
animate_bar();
var act_id = parseInt($('.sidebar .paginator div.act_pagi').attr('id').replace(/\D+/g,""));
var pagi = $('#sb_paginator div').length;
if (act_id < pagi) {act_id++} else {act_id = 1};
pagination(act_id);
},timer);
};
function animate_bar() {$('.progress_bar span').animate({width: "100%"},timer, function(){$(this).css("width", "0px");});};
function stopInterval() {clearInterval(interval); $('.progress_bar span').stop().css('width', '0px');}
function paginator() {
$('.sidebar .paginator div').click(function(){
if(!$(this).hasClass('act_pagi')) {
var act_id = parseInt($(this).attr('id').replace(/\D+/g,""));
pagination(act_id);
}
});
$('.sidebar').mouseenter(function(){stopInterval();}); // остановка автоматического перелистывания при наведении мышки
$('.sidebar').mouseleave(function(){startInterval();animate_bar();}); // запуск автоматического перелистывания когда наведения мышки нет
}
function pagination(act_id) {
$('.sidebar .paginator div').removeClass('act_pagi');
$('.sidebar .paginator div#sb_p'+act_id).addClass('act_pagi');
$('.sb_content').removeClass('show');
$('.sb_content#sb'+act_id).addClass('show');
$('.section1 .back').removeClass('show');
$('.section1 .back#back'+act_id).addClass('show');
};
Вот собственно запуск
$(document).ready(function() {
//Sidebar pagination
if ($('div').is('.sidebar')) {
paginator();
animate_bar();
startInterval();
}
});
Функция viewport()
function viewport(elem) {
var win_h = window.innerHeight,
scrol = $(document).scrollTop(),
elem_h = elem.height(),
elem_t = elem.offset().top;
if (scrol+win_h >= elem_t && scrol <= elem_t+elem_h) {return ("visible");} else {return ("no");}
}
Реакция на viewport()
$(document).on('scroll', function () {
if ($('div').is('.sidebar')) {if (viewport($('.section1')) != 'visible') {stopInterval();}}
});
Вот так работает всё:
- при загрузке страницы запускается автопролистывание;
- работает нажатие по кнопкам;
- автопролистывание останавливается при наведении на сайдбар;
- останавливается, когда блок уходит из области видимости при скролле.
- запускается снова когда мышка уходит с сайдбара.
Но при возвращении блока в область видимости автопролистывание снова не запускается.
Потому что, если я пишу вот так:
$(document).on('scroll', function () {
if ($('div').is('.sidebar')) {
if (viewport($('.section1')) != 'visible') {stopInterval();}
else {startInterval();}
}
});
Получается какая-то фигня неописуемая.
Что я делаю не так?
P.S. И ещё заметил, что если страница какое-то время открыта в фоне (в соседней вкладке), то вся эта конструкция начинает как-то странно работать: анимированная полоска начинает жить своей жизнью, и не реагирует на наведения мыши на сайдбар. Точнее она как ms останавливается на секунду, а потом прёт дальше, хотя должна обнуляться и начинать свой путь сначала.
Вот тут я вообще не понимаю что происходит.
