CODEWITHSUNDEEP
javascriptjquery
92-92
92-92

Reputation: 21

jQuery trouble combining 2 functions

I am trying to have this working in the following way:

IF class is .lazy AND IF visible in viewport THEN add class .already-visible otherwise add class .come-in BUT IF class is .lazy-up AND IF visible in viewport THEN add class .already-visible-up otherwise add class .come-up

:)

Here below is my code, but it triggers only the first part... please help 🙏 Thank you thank you!

(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);
var win = $(window);
var allMods = $(".lazy");
allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible");
  }
});
win.scroll(function(event) {
  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in");
    }
  });
});
(jQuery);
var win = $(window);
var allMods = $(".lazy-up");
allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible-up");
  }
});
win.scroll(function(event) {
  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-up");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Views: 169

Answers (1)

Sven Eberth
Sven Eberth

Reputation: 3116

The problem is that you override allMods but use it in both scroll functions and expect different values/elements.
Use two variables and declare them as const, so you get an error if you accidentally try to change them.

(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() {
  const win = $(window);
  const allLazy = $(".lazy");
  allLazy.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("already-visible");
    }
  });
  win.scroll(function(event) {
    allLazy.each(function(i, el) {
      var el = $(el);
      if (el.visible(true) && !el.hasClass("already-visible")) {
        el.addClass("come-in");
      }
    });
  });

  const allLazyUp = $(".lazy-up");
  allLazyUp.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("already-visible-up");
    }
  });
  win.scroll(function(event) {
    allLazyUp.each(function(i, el) {
      var el = $(el);
      if (el.visible(true) && !el.hasClass("already-visible-up")) {
        el.addClass("come-up");
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="TestA lazy"> <img src="https://dummyimage.com/600x400/000/fff" alt="hello"> </div>
<div class="TestB lazy"> <img src="https://dummyimage.com/600x400/000/fff" alt="hello"> </div>
<div class="TestA lazy-up"> <img src="https://dummyimage.com/600x400/000/fff" alt="hello"> </div>
<div class="TestB lazy-up"> <img src="https://dummyimage.com/600x400/000/fff" alt="final hello"> </div>

Edit: You can check with hasClass() if the element has the class .already-visible-up or .already-visible-up. If not and is visible you can add the class come-in/come-up.

Upvotes: 1

Related Questions