Question

对于我的网站，我希望当用户滚动到底部时能够使用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，所以我想为什么当用户滚动到每个页面的底部时为什么不使用.each函数来淡入淡出divs

$(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

Answer 1

发现它对我有用

    $(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 fadeIn（）多个div接一个

1 个答案: