javascript - 确定用户滚动与单击动画功能

Question

我有一个固定的导航栏，当用户向下滚动时它会隐藏；并在向上滚动时出现。这很好用。 这是一个单页滚动网站。

当用户单击导航项并随后向下滚动页面时，会出现问题，固定导航会消失。我希望在单击导航项时保持不变，直到用户使用鼠标滚轮或滚动条向下滚动为止。

到目前为止，我的方法是设置一个变量来确定它是否是编程滚动。我使用该变量来确定导航是否应隐藏作为条件语句。

window.programScrolling = false;

导航项点击函数如下，它将 var 设置为 true。

$('a[href^="#"]:not([href="#"])').on('click',function (e) {
  e.preventDefault();

  var target = this.hash;
  var $target = $(target);

  $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 500, 'easeInOutCubic', function () {

      window.programScrolling = true;

  });

});

这段代码确实有效。但只有一次，就像现在一样，该变量始终为真。

我需要一种方法，当用户滚动时将该变量重置回 false。

我尝试过设置滚动事件

$(window).scroll(function(e) {
   window.programScrolling = false;
});

但这似乎优先于点击事件，因此该变量现在始终为 false。

有什么建议吗？或者其他方法？

Answer 1

如果 $(window).scroll 优先，您的意思是它是第二个调用，您可以使用以下代码:

$(window).scroll(function() {
   if (programScrolling)
      window.programScrolling = false;
   else{
      //User initiated scroll!
   }
});