向下滚动时隐藏导航栏并在向上滚动时显示答案

【问题标题】：Hide nav bar on scroll down and show it on scroll up向下滚动时隐藏导航栏并在向上滚动时显示
【发布时间】：2018-07-14 15:31:15
【问题描述】：

我正在使用这个 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>

【问题讨论】：

究竟在什么地方需要额外的包装器？ // 一开始你可能不应该在固定和绝对之间切换，在任何情况下都可能有点“古怪”。我会将它保持在固定状态，并通过 translateY 使其“向上滑动”。通过一个额外的类（menu-hidden 或类似的东西）实现这一点，您可以根据需要添加/删除它，并为 transform 属性添加一个转换......做得很好，不是吗？
谢谢，但有没有办法实现这一点，而不必在标题中添加一个类（我不知道如何向标题中添加一个类，可能需要更新 wordpress 主题的脚本，但不知道是哪一个？）
您首先需要一些自定义 JavaScript 来响应用户滚动页面......所以去调查一下主题是否已经有任何选项可以以某种方式嵌入这样的东西，去寻找一个使它成为可能的插件，或者研究如何以适当的方式自己修改它。
谢谢。我已经设法将一个自定义类添加到标题中，这应该允许我复制在 JSFiddle 上找到的解决方案，但现在遇到了另一个问题（“标题未定义”）。我已经相应地更新了我的问题
它表示$ 未定义，与您尝试在那里选择的标题元素无关。因此，要么根本没有嵌入 jQuery（在这样的 WP 设置中可能不太可能），要么您尝试嵌入此代码 before jQuery 被嵌入，或者最后并且可能不太可能，jQuery 被嵌入无冲突模式。

标签： javascript html css wordpress wordpress-theming

【解决方案1】：

您无需在标题中添加类即可使用纯 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>

编辑：这是一个更新的 sn-p，应该适用于相关网站。

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>

【讨论】：

您好，很抱歉回复晚了。我已更新我的答案以包含我在您的网站上测试过的解决方案。
非常感谢！我已将您的代码添加到实时网站，但仍然呈现有点奇怪 - 有机会请您看一下吗？非常感谢！
嗨，格雷格，谢谢，我没听懂。我已经更新了第二个 sn-p 以确保标题正确显示。
谢谢布赖恩。我们快到了:) 唯一剩下的问题是页面加载后的初始状态。由于某种原因，标题在页面加载时不可见。一旦你开始向下和向上滚动，一切正常。另外，如果我可以滥用您的时间和知识，有没有办法使显示/隐藏效果更流畅？再次感谢您的帮助！
任何时候。我更新了第二个 sn-p 以使动画更流畅，并检查页面加载。您只需添加 transition css 属性即可实现平滑过渡。

【解决方案2】：

先安装插件添加自定义JS和CSS（虽然没有这个插件也可以添加CSS），你可以使用“Simple Custom CSS and JS”插件。

然后，假设您的导航栏 ID 是“#site-header”并且高 80 像素。这里有完整的代码：

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

【讨论】：

【解决方案3】：

有 JS 没有 jQuery

let navBar = document.querySelector('nav')
let prevScrollPos = window.pageYOffset
window.addEventListener('scroll', () => {
  let currentScrollPos = window.pageYOffset
  prevScrollPos > currentScrollPos ? navBar.style.top = '0' : navBar.style.top = '-40px'
  prevScrollPos = currentScrollPos
})

body {
  height: 7000px;
  background-color: black;
  margin:0;
  padding:0
}

nav{
  width: 100%;
  background-color: gold;
  color: black;
  text-align: center;
  padding: .5rem;
  font: bold 2rem monospace;

  position: fixed;
  top: 0;
  transition: .3s;
  z-index: 999;
}

&lt;nav&gt;Nav&lt;/nav&gt;

【讨论】：