检测从页面上的当前位置滚动了多少像素，而不仅仅是文档顶部?

Question

所以我想要在滚动:)上更改某些内容的标准 UX 内容到目前为止，我正在使用这个jQuery：

$(document).scroll(function() {    
var scroll = $(document).scrollTop();
if (scroll >= 50) {
$(".search-bar").removeClass('open');
$(".search-bttn").removeClass('close');
}
});

这会在从文档顶部滚动 50px 后更改类，是否可以在从页面上的任何位置滚动 50px 后更改类？

UX对此的解释是，我有一个位置：固定搜索栏在单击功能打开后出现，然后我希望它在滚动后消失，但我不希望它在滚动1px后消失，因为它很容易意外滚动几个像素，我想说仅在50像素左右后将其删除。

希望这是有道理的！希望有人能对此提供一些见解...

干杯！

Answer 1

在单击事件中，在搜索栏打开代码后，您可以获取滚动位置值并将其存储在一个变量中。 然后在滚动时，您可以将滚动后滚动的新值与该变量进行比较。

var oldScrollposition = 0;
$("#ClickControl").on("click",function(){
$(".search-bar").addClass('open');
oldScrollposition =  $(document).scrollTop();
});
$(document).scroll(function() {    
var scroll = $(document).scrollTop();
if(scroll < oldScrollposition )
scroll = oldScrollposition -scroll; // If scroll down
else
scroll = scroll - oldScrollposition; // If scroll Up
if (scroll >= 50) {
$(".search-bar").removeClass('open');
$(".search-bttn").removeClass('close');
}
});

根据您的情况更改点击控件 ID。