スクロールのナビゲーションバーを非表示にする - アスリートワードプレスのテーマ

Question

WordPressのナビゲーションメニューバーをスクロールダウンしてスクロールして表示するように設定しようとしています。私のサイトのURLはinforce.bgです。下記の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; 
} 

Answer 1

私たちはあなたのサイトから詳細を逃しているが、これはあなたが何をしたいのか、基本的であるようだ：私は私の答えを改善することができるでしょう

var scrollTop = 0; 
 
window.addEventListener("scroll", function(e) { 
 
    var s = window.pageYOffset || document.documentElement.scrollTop 
 
    if (s > scrollTop) { 
 
    document.getElementById("globalNav").classList.add("collapsed"); 
 
    } else { 
 
    document.getElementById("globalNav").classList.remove("collapsed"); 
 
    } 
 
    scrollTop = s; 
 
})

nav { 
 
    background-color: #474747; 
 
    color: #f9f9f9; 
 
    position: fixed; 
 
    width: 100%; 
 
    
 
    /* Relevant to the hiding transition */ 
 
    max-height: 200px; 
 
    overflow: hidden; 
 
    transition: max-height 0.5s ease; 
 

 
} 
 

 
nav.collapsed { 
 
    max-height: 0; 
 
} 
 
/* --- */ 
 

 

 
body { 
 
    font-family: Arial, "sans serif"; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav ul li { 
 
    display: inline-flex; 
 
} 
 

 
nav ul li a { 
 
    color: #f9f9f9; 
 
    text-decoration: none; 
 
    padding: 5px; 
 
    transition: color 0.3s ease; 
 
} 
 

 
nav ul li a:hover { 
 
    color: #d1d1d1; 
 
} 
 

 
nav ul li+li { 
 
    border-left: 1px solid lightgray; 
 
}

<nav id="globalNav"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    <li><a href="#">About</a> 
 
    <li><a href="#">Contact</a> 
 
    </ul> 
 
</nav> 
 
<main> 
 
    <div style="height: 300vh"> <!-- Simulating content --></div> 
 
</main>

より詳細に。

クレジット：

Detecting Scroll Direction

Using max-height instead of height: auto