Question

如何将.resize函数添加到jquery中的同一.scroll函数，以便在滚动到页面上的某个点/页面底部时可以在桌面上显示2 div，而在打开时当我滚动到某个位置/在页面底部时，它会依次出现。

由于这是一个非常大的网站，如果您希望在网站上发表想法，我将仅粘贴js文件，并在inspect元素中的“ Sources”下签出js css和html。我已经在我认为调整大小功能的地方添加了评论

这是网站 https://54x1.github.io/AniBuy/pages/indexv2.html

这是js文件

$(document).ready(function() {

  $('body').fadeIn(1000);
  var oncedone1 = false;
  var oncedone2 = false;
  var oncedone3 = false;
  var oncedone1v1 = false;
  var oncedone2v1 = false;
  var oncedone3v1 = false;
  var oncedone4v1 = false;

  $(document).ready(function() {

    $(window).scroll(function() {
      /*$(window).resize(function() {*/
      /*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;
      //}
      //}
      // }
      //}
    });
  });
});

Answer 1

您可以使用.on（）方法将多个事件处理程序附加到一个元素上。

$(document).on('resize scroll', function (e) {
  alert(e.type);
});

然后使用e.type获取触发该函数的事件类型。

Answer 2

这可能不是您想使用jQuery的功能，而是想要使用CSS的功能。使用媒体查询很容易解决：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

我如何将.resize函数添加到jquery中的相同.scroll函数

2 个答案: