底部菜单隐藏/显示向上和向下滚动

时间:2016-07-04 04:58:54

标签: javascript html css

我有以下代码在向下滚动时隐藏我的菜单,在向上滚动时显示。

JS

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight();

$(window).scroll(function(event) {
  didScroll = true;
});

setInterval(function() {
 if (didScroll) {
   hasScrolled();
   didScroll = false;
 }
}, 250);

function hasScrolled() {
  var st = $(this).scrollTop();
  if (Math.abs(lastScrollTop - st) <= delta)
    return;
  if (st > lastScrollTop && st > navbarHeight ) {
    // Scroll Down
  $('nav').removeClass('nav-down').addClass('nav-up');
  } else {
    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
      $('nav').removeClass('nav-up').addClass('nav-down');
    }
  }
  lastScrollTop = st;
}

我希望它以相同的方式隐藏和显示,但同时向上和向下滚动(当您向上或向下滚动然后再向下滚动时隐藏它)

0 个答案:

没有答案