Question

我当前正在制作一个覆盖层，该覆盖层在用户滚动到某个点（向下）时覆盖顶部的粘性条，而在向上滚动时消失。但是，我希望能够在执行代码之前滚动至少50像素（类似于触发叠加层之前的间隙）。

$(function() {
var prevScroll = $(document).scrollTop(); //initial position 

$(window).scroll(function() {
    var newScroll = $(document).scrollTop(); //position from top after scrolling 

    if(newScroll > prevScroll) { // checks if the user has scrolled up or down
            var fromNew = $(document).scrollTop(); // holds value to compare with the position + gap amount

            if (fromNew > newScroll + 50) { //checks to see if scrolled for 50px
                $("#stick-start").fadeIn("fast");
                prevScroll = newScroll + 50; //initial position + scrolled amount
            };

    } else {
            var fromNew = $(document).scrollTop();

            if (fromNew > newScroll - 50) {
                if ($("#stick-start").hasClass("is-stuck")) {
                    $("#stick-start").fadeOut("fast");
                    prevScroll = newScroll - 50;
                };
            };
         };
     });
});

检查您是否向上滚动或向下滚动的条件有效。但是，现在，覆盖层只是不断地反复淡入和淡出。我该怎么做，以便在发生任何事情之前必须滚动至少50px？

Answer 1

我认为这应该可以帮助您到达目的地。

var $document = $(document);
$(window).scroll(function() {
  if ($document.scrollTop() >= 50) {
    $("#stick-start").fadeIn("fast");
  } else {
    $("#stick-start").fadeOut("fast");
  }
});

编辑：发生错误，现在应该很好。

Answer 2

$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {
      $("#stick-start").fadeIn();
   } else {
       $("#stick-start").fadeOut();
   }
});

从某个点（向上或向下）滚动一定数量的像素后执行代码

2 个答案: