忽略功能？

Question

所以当你在页面底部滚动时，我有一个向下滑动的div。在那个div中，我有一个“X”锚点再次滑动它（这是在jQuery中）。但如果我滚动，div会再次向下滑动（自然）。所以我首先想要X，让“#topDiv”向上滑动，然后忽略使其成为slideDown的函数。

完整代码：

  $("#topDiv").hide();

  $(window).scroll(function () {
      if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
          $("#topDiv").slideDown();
      }


      if ($(window).scrollTop() + $(window).height() < $(document).height() - 800) {

          $("#topDiv").slideUp();
      }
      $("#closeTop").click(function () {
          $("#topDiv").slideUp();
          return false;
      });
  });

Demo Page（http://tutorials.underbakke.net/js/function/）

Answer 1

点击“X”后，您可以使用开/关方法取消绑定幻灯片

$("#topDiv").hide();

$(window).on('scroll', showTopDiv);

function showTopDiv() {
      if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
          $("#topDiv").slideDown();
      }
}

$(window).on('scroll', function() {
      if ($(window).scrollTop() + $(window).height() < $(document).height() - 800) {
          $("#topDiv").slideUp();
      }
});

$("#closeTop").click(function () {
      $("#topDiv").slideUp();
      $(window).off('scroll', showTopDiv);
      return false;
});

此外，在您的幻灯片功能中，将$("#topDiv").is(':visible')添加到if语句将确保它不会被执行。

是否真的需要在每个滚动条上绑定click函数？

Answer 2

试试这个：

$("#topDiv").hide();

$(window).addEventListener('scroll', function(event) {
   if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
      $("#topDiv").slideDown();
  }


  if ($(window).scrollTop() + $(window).height() < $(document).height() - 800) {
      $("#topDiv").slideUp();
  }

  $("#closeTop").click(function () {
      $("#topDiv").slideUp();
      $(window).removeEventListener('scroll',arguments.callee,false);
  });
}