jquery - jQuery：在延迟或滚动时打开模式

Question

我有一个使用 fancybox 的模态。

我的客户希望它在延迟后出现，或者一旦他们向下滚动到特定的 div。

他们还希望每个会话只触发一次，在这种情况下每天一次。

我让所有这些东西大部分都独立工作，但我似乎无法将所有东西放在一起。我知道我的 JS 是有限的，所以我确定我错过了一些简单的东西。

基本上，我希望代码是：

1. 等待。如果您不滚动，请在延迟后关闭模式。
2. 如果模式没有延迟触发，请在向下滚动后触发它。
3. 一天内不要再开火。

在滚动功能上，这似乎也触发了不止一次……您到达该部分，但是如果您继续滚动，它将再次触发，从而导致“找不到内容”错误。

我的代码在下面，这里有一个测试页面：https ://mayeswilsonassociates.com/code-testing-page/

谁能帮我解决这个问题？

if (window.localStorage) {
  var nextPopup = localStorage.getItem('nextNewsletter');
  var expires = new Date();
  expires = expires.setHours(expires.getHours() + 24);


  // This is then function used to detect if the element is scrolled into view
  function elementScrolled(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top + 750;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
  }



  function newsletterDelay() {

    if (nextPopup < new Date()) {
      setTimeout(function() {
        $.fancybox.open({
          src: '#mc-popup #mc_embed_signup',
          type: 'inline',
        });
      }, 4500);
      localStorage.setItem('nextNewsletter', expires);
    };
  };


  function newsletterScroll() {
    if (nextPopup < new Date()) {
    $(window).scroll(function() {
      if (elementScrolled('#section-services')) {
        $.fancybox.open({
          src: '#mc-popup #mc_embed_signup',
          type: 'inline',
        });
        localStorage.setItem('nextNewsletter', expires);
      }
    });
  };
};
};
newsletterDelay();
newsletterScroll();

标签： jqueryscrollmodal-dialogfancyboxdelay