Question

所以我想要标准的UX在滚动上改变一些东西:)我到目前为止使用这个jQuery：

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

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

用户体验的解释是我有一个位置：在点击功能打开后出现固定搜索栏，然后我希望它在滚动后消失，但我不希望它在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

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

1 个答案: