Question

我正在尝试将我的Wordpress导航菜单栏配置为在向下滚动时隐藏，并在向上滚动时显示。我的网址网址为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

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

＆＃13;

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;
})

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我能够更详细地改进我的答案。

现金：

Detecting Scroll Direction

Using max-height instead of height: auto

隐藏滚动导航栏 - 运动员Wordpress主题

1 个答案: