Шаблон модуля JavaScript - событие прокрутки не работает
Я пытаюсь реализовать шаблон модуля в 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.info("Scroll");
} else {
console.info("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>Я верю, что событие прокрутки должно срабатывать, когда я прокручиваю страницу, поскольку я возвращаю scroll с помощью init
Событие прокрутки обязательно сработает, когда вы прокручиваете страницу ... но это не имеет ничего общего с вашим кодом. Вам следует изучить разницу между функцией и прослушивателем событий. Все, что у вас есть, - это функция без прослушивателя событий. Удачи.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Здесь есть несколько неправильных (или, по крайней мере, неидеальных) вещей. Во-первых, вы ничего не привязываете к событию прокрутки. Похоже, вы полагаете, что ваша функция scroll будет вызываться при возникновении этого события, но это не так. Вам нужно добавить что-то вроде:
$(document).on("scroll", scroll);
Вы можете разместить это там, где хотите (в любом случае, после того, как функция прокрутки будет определена), но было бы типично и рекомендуется поместить это в вашу функцию инициализации, заключенную в блок $(document).ready.
Далее, на самом деле ничто не вызывает вашу функцию init, хотя, возможно, это вызывается кодом, который здесь не отображается. Вам нужно будет вызвать так или иначе; это не произойдет автоматически.
Наконец, ваша функция init имеет бессмысленный блок if / return; если нет $con, вы возвращаете, но вы все равно делаете это, потому что там нет дополнительных функций.
И последний совет: события прокрутки обычно не ограничиваются браузером по скорости. (Или, по крайней мере, не до такой степени, как вы, вероятно, ожидаете.) Это событие вызовет много, и вы можете захотеть добавить свое собственное ограничение скорости для любого события, которое вы вызываете в результате. В противном случае производительность, вероятно, снизится, особенно на более длинных страницах.
Вы никогда не просите свой код делать что-либо, кроме загрузки функции. Что, по вашему мнению, вызывает событие прокрутки для запуска в ваших словах.