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文particulary、それが悪いのか分かりません。それは動作しますが、どのようになっているのかはわかりません。ブラウザがifステートメントを無視して、ユーザーがタブにスクロールしたときではなく、ページが読み込まれてから5秒後にカウントを開始するようです。しかし、そのif文をChrome Consoleに書き込むと、それは想定されているように機能します。

ここにはscreenshotがあります。

どうしたらいいのですか教えてください。

Answer 1

コードは100％動作しています。 visibilyチェックするscrollTopプロパティを使用してください - - scrollイベントリスナー（element.scroll(callback)）

2を追加

1：

あなたはわずか2つの物事を変更する必要があります。 （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); 
}