Javascript 隐藏/显示导航栏工作不正常

我似乎不能把这个弄对。我已经找了几个小时的解决办法

我需要删除的位置：固定；为了让我的导航栏在菜单打开时按下内容。现在的问题是，当我向下滚动时，导航栏会消失，但当我向上滚动时，它会立即重新出现。相反，只有当我到达页面顶部时，它才会重新出现。此行为仅在位置：固定时开始；被评论掉了。如能了解我如何解决此问题，将不胜感激

HTML:

JavaScript:

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

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

// How long should we listen to the scroll before acting?
setInterval(function() {
  if (didScroll) {
      hasScrolled();
      didScroll = false;
  }
}, 100);


function hasScrolled() {
  var st = $(this).scrollTop();

  // Make sure they scroll more than delta
  if(Math.abs(lastScrollTop - st) <= delta)
      return;

  // If they scrolled down and are past the navbar, add class .nav-up.
  // This is necessary so you never see what is "behind" the navbar.
  if (st > lastScrollTop && st > navbarHeight) {
      // Scroll Down
      $('#masthead').removeClass('nav-down').addClass('nav-up');
  } else {
      // Scroll Up
      if(st + $(window).height() < $(document).height()) {
          $('#masthead').removeClass('nav-up').addClass('nav-down');
      }
  }

  lastScrollTop = st;
}

 $('#button').on('click', function() {
   $('#alpha').toggleClass('myClass');
});

// $('#button').on("click", function() {
//    $('#alpha').slideToggle(1000);
//  });

//向下滚动时隐藏标题
卷轴；
var lastScrollTop=0；
varδ=5；
var navbarHeight=$（'header'）.outerHeight（）；
$（窗口）。滚动（功能（事件）{
didcoll=true；
});
//在表演之前我们应该听多长时间？
setInterval（函数（）{
如果（滚动）{
哈斯克罗尔（）；
didcoll=false；
}
}, 100);
函数hasScrolled（）{
var st=$（this.scrollTop（）；
//确保它们滚动的次数大于增量
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
//向下滚动
$（“#报头”）.removeClass（'nav-down'）.addClass（'nav-up'）；
}否则{
//向上滚动
如果（st+$（窗口）.height（）<$（文档）.height（））{
$（“#报头”）.removeClass（'nav-up'）.addClass（'nav-down'）；
}
}
lastScrollTop=st；
}
$（'#按钮'）。在（'单击'，函数（）上）{
$（'#alpha'）。toggleClass（'myClass'）；
});
//$（'#按钮'）。在（“单击”，函数（）上）{
//$（'#alpha'）。滑动切换（1000）；
//  });

如果我把位置：固定；回到主页，我的问题已经解决，但当菜单打开时，内容不再向下推。相反，导航栏与内容重叠，不会向下推。有没有一种方法可以解决这个问题而不只是添加填充？提前感谢您的帮助

这是一把小提琴：

---

所以您基本上希望导航条在向下滚动时隐藏，但在其他情况下可见？还是在向上滚动时可见？导航栏什么时候应该可见？嘿，安东尼，导航栏在向下滚动时消失，在向上滚动时立即重新出现，效果非常好。（当我将导航栏位置设置为固定位置时）。我的问题更多的是当我移除固定属性时为什么会中断（导航栏只在我到达顶部时出现）。删除它的原因是为了让菜单在打开页面时按下页面内容。我希望这是有意义的。删除

fixed

时，它可能会中断，因为它不再固定在浏览器窗口中，而是在文档中占据正常位置。所以真正的问题是，当导航栏可见时，它会隐藏其顶部的内容，而不是将其向下推？正确。当导航栏可见时，内容将隐藏。不使用“修复”可以修复此问题，但也会弄乱我的导航栏动画，使用它会中断向下推内容的部分，但会修复动画。这真的是一个由两部分组成的问题。看看小提琴吧。问题不在于

修复了
，所以不要再去想它了。如果没有固定的
，整个事情就会停止工作。问题是，当内容进入视图时，您希望导航栏向下推内容。一个棘手的问题是，您无法可靠地告诉窗口使用
window.scrollBy（0，navbarHeight）
向下滚动，因为这会触发一个新的滚动事件，该事件会再次调用滚动处理程序。还在修补。。。
p {
  color: white;
}

.navbar-toggler{
  border: none!important;
}

.navbar-toggler:hover, .navbar-toggler:focus {
  outline: 2px solid gray;
}

#masthead {
/*   position: fixed; */
  top: 0;
  left: 0;
  transition: transform 450ms ease;
  width: 100%;
}

.nav-up {
  transform: translateY(-100%)
}

/* .bg {
  /* The image used
  background-image: url("https://cdn42.picsart.com/167005229000201.jpeg?r1024x1024");
} */

html, body{
  height: 100%;
}
body {
    background-image: url(https://cdn42.picsart.com/167005229000201.jpeg?r1024x1024) ;
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    background-color: #999;
/*   padding-top: 56px; */
}

#alpha{
  background: rgba(0, 0, 0, .8);
}

/* .myClass {
  transition: transform 400ms ease;
  transform: translateY(5%);
} */

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

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

// How long should we listen to the scroll before acting?
setInterval(function() {
  if (didScroll) {
      hasScrolled();
      didScroll = false;
  }
}, 100);


function hasScrolled() {
  var st = $(this).scrollTop();

  // Make sure they scroll more than delta
  if(Math.abs(lastScrollTop - st) <= delta)
      return;

  // If they scrolled down and are past the navbar, add class .nav-up.
  // This is necessary so you never see what is "behind" the navbar.
  if (st > lastScrollTop && st > navbarHeight) {
      // Scroll Down
      $('#masthead').removeClass('nav-down').addClass('nav-up');
  } else {
      // Scroll Up
      if(st + $(window).height() < $(document).height()) {
          $('#masthead').removeClass('nav-up').addClass('nav-down');
      }
  }

  lastScrollTop = st;
}

 $('#button').on('click', function() {
   $('#alpha').toggleClass('myClass');
});

// $('#button').on("click", function() {
//    $('#alpha').slideToggle(1000);
//  });