jquery - 每次滚动到底部时，jquery fadeIn()多个div接一个

可以，对于我的网站，当用户滚动到底部时，我希望能够使用divs加载更多的fadeIn()

我想到的第一个代码示例是：

  $(document).ready(function() {

$(window).on('scroll resize', function (e) {
  /*desktop > 768px*/
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && oncedone1 == false && $(window).width() > 768) {
    $(".breakpoint").fadeIn(2500).css({
      "display": "grid"
    });
    $("#home-page-best-anime, .home-page-best-anime, #home-page-season-anime, .home-page-season-anime, #home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").hide();
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && oncedone2 == false) {
      $("#home-page-best-anime, .home-page-best-anime, #home-page-season-anime, .home-page-season-anime").fadeIn(2500).css({
        "display": "grid"
      });
      if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && oncedone3 == false) {
        $("#home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").fadeIn(2500).css({
          "display": "grid"
        });
        oncedone1 = true;
        oncedone2 = true;
        oncedone3 = true;
        //oncedone4 = true;
      }

    }
  }
  /*mobile / < 768px*/
  //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone1v1 == false /*&& $(window).width() < 768*/) {
  //$(".breakpoint").fadeIn(2500).css({ "display": "grid" });
  //$("#home-page-best-anime, .home-page-best-anime, #home-page-season-anime, .home-page-season-anime, #home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").hide();
  //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone2v1 == false) {
  //  $("#home-page-best-anime, .home-page-best-anime").fadeIn(2500).css({ "display": "grid" });
  //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone3v1 == false) {
  //  $("#home-page-season-anime, .home-page-season-anime").fadeIn(2500).css({ "display": "grid" });
  //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone4v1 == false) {
  //  $("#home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").fadeIn(2500).css({ "display": "grid" });
  //oncedone1v1 = true;
  //oncedone2v1 = true;
  //oncedone3v1 = true;
  //oncedone4v1 = true;
  //}
  //}
  // }
  //}
});

但这会带来一些错误并在整个页面中淡入淡出，而不仅仅是div，所以我想为什么当用户滚动到每个divs的页面底部时，为什么不使用.each函数来淡入淡出

$(window).on('scroll resize', function () {
            $('.bpshow').each(function (i) {
                if ($(window).scrollTop() + $(window).height() == $(document).height() && $(window).width() > 768) {
                    $(this).fadeIn(2500).css({ "display": "grid" });
                }
            });
        });

这是我正在工作的网站：AniBUY All Anime

最佳答案

发现这对我有用

    $(window).on('scroll resize', function (i) {
        $('.bpshow').each(function () {
            if ($(window).scrollTop() + $(window).height() == $(document).height() && $(window).width() > 768) {
                $(this).fadeIn(1500).css({ "display": "grid" });
            }
        });
    });

但是我需要将bpshow添加到每个类的breakpoint-1以及每个类的-2上，如网站上所示

关于jquery - 每次滚动到底部时，jquery fadeIn()多个div接一个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51299668/