确定用户滚动与点击动画功能

Question

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

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

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

window.programScrolling = false;

nav item click函数如下，将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;
});

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

有什么建议吗？还是其他方法？

Answer 1

如果 $(window).scroll 优先，你的意思是它被称为第二，你可以使用这个代码：

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