jQuery实现两类元素视口检测加类功能仅首段代码生效问题求助

• 可见性判断函数visible内部的运算符被错误转义为HTML实体：<对应JS合法运算符<、>对应>、&&对应&&，转义后的内容无法被JS识别为合法运算符，导致逻辑执行异常。
• 代码中间存在多余的孤立语句(jQuery);，会打断后续代码执行流程，导致.lazy-up相关的初始化和滚动监听逻辑无法正常运行。
• 重复声明win、allMods变量，造成变量覆盖，逻辑混乱。

JS代码 #

(function($) {
  $.fn.visible = function(partial) {
    var $t = $(this),
      $w = $(window),
      viewTop = $w.scrollTop(),
      viewBottom = viewTop + $w.height(),
      _top = $t.offset().top,
      _bottom = _top + $t.height(),
      compareTop = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom;
    // 修复运算符转义问题
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
  };
})(jQuery);

$(function() {
  var win = $(window);
  var lazyMods = $(".lazy");
  var lazyUpMods = $(".lazy-up");

  // 页面加载完成后初始判断
  lazyMods.each(function(i, el) {
    var $el = $(el);
    if ($el.visible(true)) {
      $el.addClass("already-visible");
    }
  });
  lazyUpMods.each(function(i, el) {
    var $el = $(el);
    if ($el.visible(true)) {
      $el.addClass("already-visible-up");
    }
  });

  // 合并滚动监听，减少性能消耗
  win.scroll(function() {
    lazyMods.each(function(i, el) {
      var $el = $(el);
      if ($el.visible(true)) {
        $el.addClass("come-in");
      }
    });
    lazyUpMods.each(function(i, el) {
      var $el = $(el);
      if ($el.visible(true)) {
        $el.addClass("come-up");
      }
    });
  });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 将上述JS代码放在这个script标签之后即可正常运行 -->

内容的提问来源于stack exchange，提问作者92-92