javascript - 模块模式 JavaScript - 滚动事件不起作用

Question

我正在尝试在 JS 中实现模块模式，但滚动事件未触发，代码有什么问题，请按照示例进行

var modBrandHeader = (function ($) {
    'use strict';
  
    var $con;
  
    /* GENERIC */
    var init = function () {
      $con = $('.brand-header');
      if (!$con.length) {
        return;
      }
    };

    var scroll = function (scrollTop) {
      if (scrollTop > $('.brand-header').height()) {
          console.log("Scroll");
      } else {
        console.log("Scroll removed");
      }
    };

    return {
      init: init,
      scroll: scroll
    };
  })(jQuery);
  

.brand-header {
  height:70px;
  width:100%;
  float:left;
  background-color:#ddd;
  border-bottom:1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="brand-header">This is header</div>

Answer 1

这里有一些问题(或者至少是不理想的)。首先，您没有将任何内容与滚动事件绑定(bind)。您似乎认为当该事件触发时，您的 scroll 函数将被调用，但事实并非如此。您需要添加类似以下内容:

$(document).on("scroll", scroll);

您可以将其放置在您想要的位置(无论如何在定义滚动函数之后)，但通常建议将其放置在您的 init 函数中，包装在 $(document).ready 阻止。

接下来，实际上没有任何东西调用您的 init 函数，尽管这可能是由此处未显示的代码调用的。您需要以一种或另一种方式调用它；它不会自动发生。

最后，你的 init 函数有一个毫无意义的 if/return block ；如果没有 $con 你会返回，但你还是会这样做，因为那里没有更多的功能。

最后一个提示:滚动事件通常不受浏览器速率限制。 (或者至少，没有达到您可能期望的程度。)此事件将触发很多，您可能希望为您调用的任何事件添加自己的速率限制结果。如果不这样做，性能可能会下降，尤其是在较长的页面上。