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

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

检查您是向上滚动还是向下滚动的条件有效。但就像现在一样，叠加层只是反复淡入淡出。我如何做到这一点，以便您必须在任何事情发生之前滚动至少 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();
}
});