Question

我正在使用这个wordpress主题http://newnotio.fuelthemes.net/space/，并且希望导航栏在向下滚动时隐藏并且在向上滚动时可见（而不是始终可见）。

您能帮助我实现这一目标吗？

编辑15/07 ：我设法将一个类添加到主题的头php脚本中。我在尝试复制它时称其为nav-down：http://jsfiddle.net/mariusc23/s6mLJ/31/

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

.header {
  display: flex;
  align-items: center;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  z-index: 101;
  padding: 0 15px;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.nav-up {
    top: -50px;
}

<header class="header style2 **nav-down**">
  <nav id="full-menu" role="navigation">
  </nav>
</header>

Answer 1

第一个安装插件以添加自定义JS和CSS（尽管无需此插件即可添加CSS），但是您可以使用“简单的自定义CSS和JS”插件。

然后，假设您的导航栏ID为“＃site-header”，高度为80px。这里有完整的代码：

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

和JS（jQuery）

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

Answer 2

您可以使用普通javascript在不向标题添加类的情况下实现此目的。这是一个示例：

window.onscroll = function(e) { 
    var scrollY = window.pageYOffset || document.documentElement.scrollTop;
    var header = document.querySelector('header');

    scrollY <= this.lastScroll 
      ? header.style.visibility = 'visible'
      : header.style.visibility = 'hidden'; 

    this.lastScroll = scrollY ;
}

body {
  height: 2000px;
}

header {
  position: fixed;
  top: 0;
}

<header>
  Sample Header (scroll up/down to show/hide)
</header>

编辑：这是一个更新的代码段，适用于相关网站。

window.onscroll = function(e) { 
    var scrollY = window.pageYOffset || document.documentElement.scrollTop;
    var header = document.querySelector('header');
    var height = -header.clientHeight;
    header.style.transition = 'transform 0.1s';

    (scrollY <= Math.max(this.lastScroll, 50) || window.innerWidth <= 1200 || this.loaded === undefined)
      ? header.style.transform = 'translateY(0px)'
      : header.style.transform = 'translateY(' + height + 'px)'

    this.lastScroll = scrollY;
    this.loaded = true;
}

body {
  height: 2000px;
}

header {
  position: fixed;
  top: 0;
}

<header>
  Sample Header (scroll up/down to show/hide)
</header>

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

2 个答案: