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

但这似乎优先于click事件，因此该变量现在总是为假。

有什么建议吗？或者替代方法？

Answer 1

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

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

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

1 个答案: