Chrome игнорирует мой оператор if

Question

Существует page, над которым я работаю. Когда пользователь прокручивается до вкладок («Существующий рабочий процесс» и «Рабочий процесс KBCT»), я бы хотел изменить вкладку «Существующий рабочий процесс» на «рабочий процесс KBCT» с 5-секундной задержкой. Это необходимо выполнить только тогда, когда вкладки видны (пользователь прокручивается в эту позицию).

Вот код

tabs = jQuery('#kbct-tabs'); 
kbctTab = tabs.find('.tab:last-child'); 

if (tabs.css('visibility') === 'visible') { 
    setTimeout(function() { 
    kbctTab.click(); 
    console.log('executed'); 
    }, 5000); 
} 

И я не знаю, что случилось с ним, если в частичном заявлении. Это работает, но не так, как предполагается. Кажется, браузер игнорирует оператор if и начинает отсчет через 5 секунд после загрузки страницы, а не когда пользователь прокручивается на вкладки. НО, когда я пишу этот оператор if в Chrome Console, он работает так, как предполагается.

Адрес screenshot.

Не могли бы вы рассказать мне, что не так?

Answer 1

Ваш код работает на 100%.

Вам просто нужно изменить 2 вещи:

1 - Добавление прослушивателя scroll событий (element.scroll(callback))

2 - Используйте scrollTop свойство для проверки visibily. (element.scrollTop())

var kbctworkflow = function() { 
    var tabs = jQuery('#kbct-tabs'); 
    var kbctTab = tabs.find('.tab:last-child'); 
    if ($(document.body).scrollTop() > tabs.offset().top - 300) { 
     setTimeout(function() { 
     kbctTab.click(); 
     console.log('executed'); 
     }, 1000); 
    } 
    }; 
    $(window).scroll(kbctworkflow); 

DEMO http://jsbin.com/qatice/2/edit?js,output

Answer 2

попробовать с помощью селектора JQuery в is.

tabs = jQuery('#kbct-tabs'); 
kbctTab = tabs.find('.tab:last-child'); 

if (tabs.is(':visibile')) { 
    setTimeout(function() { 
    kbctTab.click(); 
    console.log('executed'); 
    }, 5000); 
}