Javascript 向下滚动时隐藏导航栏，向上滚动时显示导航栏

我正在使用这个wordpress主题，我希望导航栏在向下滚动时隐藏，在向上滚动时可见（而不是始终可见）

你能帮我做到这一点吗

Edit 15/07：我已经成功地将一个类添加到主题的头php脚本中。我将其称为nav down，因为我正在尝试复制：

我还复制/粘贴了JS代码，但收到一条错误消息“$不是函数”。知道问题是什么吗？谢谢

.header{
显示器：flex；
对齐项目：居中；
高度：50px；
位置：固定；
排名：0；
左：0；
背景：红色；
宽度：100%；
z指数：101；
填充：0 15px；
-moz变换：translateZ（0）；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
}
.导航{
顶部：-50px；
}

---

您可以使用普通javascript实现这一点，而无需向标头添加类。以下是一个例子：

window.onscroll=函数（e）{
var scrollY=window.pageYOffset | | document.documentElement.scrollTop；
var header=document.querySelector（'header'）；
scrollY首先安装插件以添加自定义JS和CSS（虽然CSS可以在没有此插件的情况下添加），您可以使用“简单自定义CSS和JS”插件

然后，假设您的导航栏ID为“#站点标题”，高80px。
这里有完整的代码：

CSS

和JS（jQuery）

在哪一个地方你需要一个额外的包装器来做什么？//首先你可能不应该在fixed和absolute之间切换，这在任何情况下都可能有点“yanky”。我会将它保留在fixed，并通过translateY使它“向上滑动”。通过一个额外的类（
菜单隐藏
或类似的东西）实现这一点，您可以根据需要添加/删除，并为transform属性添加一个转换…完成得很好，没有？谢谢，但是有没有一种方法可以实现这一点，而不必向标头添加类（我不知道如何向标头添加类，可能需要更新wordpress主题的脚本，但不知道是哪一种？）首先，你需要一些自定义JavaScript来对用户滚动页面做出反应……因此，去调查主题是否已经有任何选项可以嵌入这样的东西，去寻找一个插件使其成为可能，或者自己研究如何以适当的方式修改它。谢谢。我已经设法添加了一个自定义类标题应该允许我复制在JSFIDLE上找到的解决方案，但现在出现了另一个问题（“标题未定义”）。我已经相应地更新了我的问题，它说，
$
未定义，与您试图在那里选择的标题元素无关。因此，jQuery或根本没有嵌入（在这种WP设置下可能不太可能），或者您尝试在嵌入jQuery之前嵌入此代码，或者最后一次，也可能不太可能，jQuery是以noConflict模式嵌入的。您好，很抱歉响应太晚。我已更新了我的答案，以包含我在您的网站上测试过的解决方案。非常感谢！我已将您的代码添加到live网站，但仍然呈现出一些奇怪的-can如果有机会，请看一看。非常感谢！嗨，格雷格，谢谢。我没听清楚。我已经更新了第二个片段，以确保标题正确显示。谢谢布赖恩。我们就快到了：）唯一剩下的问题是页面加载后的初始状态。由于某些原因，页面加载时标题不可见。一旦你开始向下和向上滚动，一切正常。此外，如果我可以滥用你的时间和知识，有没有办法使显示/隐藏效果更平滑？再次感谢你的帮助！随时。我已经升级了编辑第二个片段以使动画更平滑，并检查页面负载。您只需添加平滑过渡的
transition
css属性。
#site-header { 
    position:fixed !important; 
    top:0;
    left:0;
    width:100%;
    transition:0.5s ease-in-out;
    height:100px;
    z-index:100;
} 

.nav-show{
transform:translatey(-100px);
left:0;
}

jQuery(document).ready(function( $ ){
  var previousScroll = 0;
  $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
    
       if (currentScroll > previousScroll){
           $('#site-header').addClass('nav-show');
       } else {
           $('#site-header').removeClass('nav-show');
       }
       previousScroll = currentScroll;
    });
  
});