javascript - 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 语句。它有效，但不是它应该的那样。浏览器似乎会忽略 if 语句，并在页面加载后 5 秒开始计数，而不是在用户滚动到选项卡时开始计数。但是当我在 Chrome 控制台中编写 if 语句时，它的工作原理就像预期的那样。

这是一个screenshot .

你能告诉我出了什么问题吗？

Answer 1

您的代码 100% 运行。

您只需要更改两件事:

1 - 添加 scroll事件监听器(element.scroll(callback))

2 - 使用scrollTop属性(property)可见地检查。 (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);

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