2017-06-01 73 views
0

我想配置我的WordPress的导航菜单栏隐藏向下滚动并出现在向上滚动。我的网址是inforce.bg请参阅下面的style.css代码部分。让我知道你是否需要额外的信息。隐藏滚动导航栏 - 运动员的WordPress主题

.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; 
} 
+0

您无法通过CSS单独做到这一点。你将需要JavaScript或jQuery的。 https://stackoverflow.com/a/17713615/4053617它可以帮助你 – vijayscode

+0

代码= downvote的屏幕截图。 –

+0

vijayscode感谢您的建议,但将javascript代码添加到functions.php文件导致一个粉碎。 – Sensi

回答

0

虽然我们缺少从您的网站的详细信息,看来这是基本上你想要做什么:

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

+0

谢谢!我的网站目前正在运行[InForce](https://inforce.bg)。请让我知道我应该提供什么进一步的细节。 – Sensi

+0

所以它看起来像你的网站没有粘滞的导航栏,你需要我的答案工作。我在JSFiddle中实现了一个基本的固定头文件,但是您还必须将

部分的margin-top设置为等于使用JavaScript的导航栏的高度,如果您有固定的高度导航栏,则使用CSS。 –

+0

您可能还想更新您的问题以获得一些真实的代码并删除CSS的屏幕截图。 –