javascript - 从某个点(向上或向下)滚动一定数量的像素后执行代码

Question

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

$(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;
                };
            };
         };
     });
});

检查您是向上滚动还是向下滚动的条件有效。但就像现在一样，叠加层只是不断地淡入淡出。我该怎么做才能在发生任何事情之前至少滚动 50 像素？

Answer 1

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

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

编辑:有错误，现在应该好了。