Javascript 在滚动条上隐藏导航栏-Wordpress主题

我正在尝试配置Wordpress导航菜单栏，使其在向下滚动时隐藏，在向上滚动时显示。我的网站url是，请参阅下面的style.css代码部分。如果您需要更多信息，请告诉我

.header{
    margin-bottom: 0;
}
#header {
    position: fixed;
    top: 0;
}
#header.reveal:not(.alt) {
    box-shadow: 0 5px 8px 5px rgba(0, 0, 0, 0.2);
    position:fixed;
    width:100%;
    top:0;
}
#header.reveal:not(.alt) {
    -webkit-animation: reveal-header 1s cubic-bezier(0.005, 0.975, 0.73, 1);
    animation: reveal-header 1s cubic-bezier(0.005, 0.975, 0.73, 1);
    border:1px solid transparent;
    background:#0f0f0f;
}
.header{
    position:relative;
    width:100%;
    z-index:9999;
    background:#0f0f0f;

}
.header.header-container  {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    margin: 0 auto;
}
.page-category .header-container {
    background: none repeat scroll 0 0 #0f0f0f;
}
.page-category  #header.reveal:not(.alt) {
    -webkit-animation: reveal-header2 1s cubic-bezier(0.005, 0.975, 0.73, 1);
    animation: reveal-header2 1s cubic-bezier(0.005, 0.975, 0.73, 1);
}

/*-- Logo --*/
.logo {
    padding: 0 !important;
    text-align:center;
}
.header-container .logo img{
    margin: 30px 10px 25px 10px;
}

/*-- Navigation --*/

/* mobile menu */
.menu-wrap{
    border:1px solid transparent;
    background:#ec3642;
    position:fixed;
    width:270px;
    height:100%;
    transition:transform ease 1s;
    -o-transition:-o-transform ease 1s;
    -ms-transition:-ms-transform ease 1s;
    -moz-transition:-moz-transform ease 1s;
    -webkit-transition:-webkit-transform ease 1s;
    transform:translateX(270px);
    -o-transform:translateX(270px);
    -ms-transform:translateX(270px);
    -moz-transform:translateX(270px);
    -webkit-transform:translateX(270px);
    right:0;
    top:0;
    margin-right:-18px;
    z-index:999999;
    overflow-y:scroll;
    padding:0 15px;
}
.show-menu .menu-wrap {
    transition:all ease 0.6s;
    -o-transition:-o-transform ease 0.6s;
    -ms-transition:-ms-transform ease 0.6s;
    -moz-transition:-moz-transform ease 0.6s;
    -webkit-transition:-webkit-transform ease 0.6s;
    transform:translateX(0);
    -o-transform:translateX(0);
    -ms-transform:translateX(0);
    -moz-transform:translateX(0);
    -webkit-transform:translateX(0);
}
.content-wrapper:before {
    background:rgba(0, 0, 0, 0.5);
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    opacity:0;
    transition: opacity 0.5s ease 0s;
    -o-transition: opacity 0.5s ease 0s;
    -ms-transition: opacity 0.5s ease 0s;
    -moz-transition: opacity 0.5s ease 0s;
    -webkit-transition: opacity 0.5s ease 0s;
    width: 0;
    z-index: 10000;
}
.show-menu .content-wrapper:before {
    height: 100%;
    opacity:1;
    transition: opacity 0.5s ease 0s;
    -o-transition: opacity 0.5s ease 0s;
    -ms-transition: opacity 0.5s ease 0s;
    -moz-transition: opacity 0.5s ease 0s;
    -webkit-transition: opacity 0.5s ease 0s;
    width: 100%;
}
.main-menu{position: relative;}
.main-menu h4{
    margin:0;
    text-transform:uppercase;
    font-size:18px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.35);
}
.menu-wrap ul {
    list-style: outside none none;
    padding: 0;
}
.menu-wrap ul.nav-menu > li {
    padding-left: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.menu-wrap li a {
    color: #fff;
    display: block;
}
.menu-wrap ul.nav-menu > li > a {
    font-size: 14px;
    padding: 11px 35px 11px 0;
}

---

虽然我们缺少您网站的详细信息，但这似乎基本上就是您想要做的：

var scrollTop=0；
window.addEventListener（“滚动”，函数（e）{
var s=window.pageYOffset | | document.documentElement.scrollTop
如果（s>滚动顶部）{
document.getElementById（“globalNav”）.classList.add（“折叠”）；
}否则{
document.getElementById（“globalNav”）.classList.remove（“折叠”）；
}
scrollTop=s；
})

nav{
背景色：#474747；
颜色：#f9f9f9；
位置：固定；
宽度：100%；
/*与隐藏转换相关*/
最大高度：200px；
溢出：隐藏；
过渡：最大高度0.5s；
}
导航崩溃{
最大高度：0；
}
/* --- */
身体{
字体系列：Arial，“无衬线”；
}
导航ul{
列表样式类型：无；
填充：0；
保证金：0；
}
李国荣{
显示：内联flex；
}
海军ulli a{
颜色：#f9f9f9；
文字装饰：无；
填充物：5px；
过渡：颜色0.3s；
}
导航ulli a：悬停{
颜色：#d1d1；
}
导航ul li+li{
左边框：1px实心浅灰色；
}

单靠CSS无法做到这一点。您将需要Javascript或jquery来实现它。它可以帮助youvijayscode谢谢你的建议，但是将javascript代码添加到functions.php文件会导致崩溃。谢谢Kirk，添加代码片段的最佳方式是什么？谢谢！我的网站目前正在运行。请让我知道我应该向您提供什么详细信息。因此，您的网站似乎还没有一个粘性导航栏，您需要我的答案才能工作。我在JSFIDLE中实现了一个基本的固定标题，但是您还必须使用JavaScript将节边距top设置为等于导航栏的高度，如果你有一个固定高度的导航栏，也可以使用CSS。你可能还想更新你的问题，以获得一些真实的代码，并删除CSS的屏幕截图。因此，看起来你在较大的屏幕上确实有一个粘性标题，所以你必须对

应用一个类，使其仅使用上面的JavaScript方法在大屏幕上消失（您可以通过CSS

@media

查询来实现这一点），并且您可能还应该使用debounce来确保用户在滚动时导航不会出现抖动。请记住在标题上设置

溢出：隐藏

。谢谢！您能提供我需要添加的CSS媒体查询，并告诉我如何以及在何处添加debounce功能吗？