有两种方法可以做到这一点，这取决于你想要什么样的行为。在这两种情况下，我们都想得到头元素和它的位置：

var headerDiv = document.querySelector("header");
var headerBottom = headerDiv.offsetTop + headerDiv.offsetHeight;

这意味着，在滚动中，我们可以检查是否已通过标题：

if (window.pageYOffset >= headerBottom)

1：标题正常滚动出视图，向上滚动时固定为顶部

在这个版本中，当向下滚动时，标题会滚动到视图之外，但当您开始向上滚动时，它将固定在屏幕的顶部。

• • 完整工作示例：**

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

• • 工作原理**

我们需要从头文件中删除固定位置，并将其添加到一个类（例如fixedToTop）中，以便在滚动时应用：

header {
    height: 7.2rem;
    transition: all 0.2s ease-in-out;
    z-index: 100;
}
header.fixedToTop {
    position: fixed;
    top: 0; left: 0; right: 0;
}

• • 现在，滚动功能的逻辑非常简单：**

1.如果我们向下滚动，那么让标题滚动到视图之外-删除fixedToTop类。
1.如果向上滚动，添加fixedToTop类，它将显示
注意，我们需要显式地设置top的值以使过渡动画工作，所以我们也在代码中这样做。
把这些放在一起，我们得到下面的scroll函数：

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;

  /* if scrolling down, let it scroll out of view as normal */
  if (prevScrollpos <= currentScrollPos ){
      headerDiv.classList.remove("fixedToTop");
      headerDiv.style.top ="-7.2rem";
  }
  /* otherwise if we're scrolling up, fix the nav to the top */
  else{  
      headerDiv.classList.add("fixedToTop");
      headerDiv.style.top = "0";
  }

  prevScrollpos = currentScrollPos;
}

2：标题是固定的，直到我们滚动经过它通常会消失的地方;固定为向上滚动时显示顶部

在这种情况下，标题是固定的，直到我们滚动通过它的"自然"位置，它会消失。

• • 工作示例：**

var prevScrollpos = window.pageYOffset;

/* Get the header element and it's position */
var headerDiv = document.querySelector("header");
var headerBottom = headerDiv.offsetTop + headerDiv.offsetHeight;

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;

  /* if we're scrolling up, or we haven't passed the header,
     show the header at the top */
  if (prevScrollpos > currentScrollPos  || currentScrollPos < headerBottom){  
      headerDiv.style.top = "0";
  }
  else{
      /* otherwise we're scrolling down & have passed the header so hide it */
      headerDiv.style.top = "-7.2rem";
  } 

  prevScrollpos = currentScrollPos;
}

header {
    background: blue;
    height: 7.2rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: top 0.2s ease-in-out;
    z-index: 100;
}

.content { 
    height:1000px; 
    margin-top:8rem; /* add space for fixed header */
}

<header></header>
<div class="content" id="contentdiv">
<h1>My Page</h1>
<p>Content 1</p><p>Content 2</p><p>Content 3</p><p>Content 4</p><p>Content 5</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>

• • 工作原理**

滚动功能中的逻辑如下：
1.如果我们向上滚动，则显示标题：
1.如果我们向下滚动...
1....如果我们已滚动通过标题，请隐藏它
1....否则显示它
把这些放在一起，我们得到下面的scroll函数：

var prevScrollpos = window.pageYOffset; // save the current position

window.onscroll = function() {
   var currentScrollPos = window.pageYOffset;

  /* if we're scrolling up, or we haven't passed the header, show the header */
  if (prevScrollpos > currentScrollPos  || currentScrollPos < headerBottom){  
      headerDiv.style.top = "0";
  }
  else{
      /* otherwise we're scrolling down & have passed the header so hide it */
      headerDiv.style.top = "-7.2rem";
  } 

  prevScrollpos = currentScrollPos;
}

也许您可以将滚动位置与元素的高度进行比较：

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
   var currentScrollPos = window.pageYOffset;
   if (prevScrollpos > currentScrollPos) {
     document.querySelector("header").style.top = "0";
   } else if (currentScrollPos > document.querySelector("header").offsetHeight) {
     document.querySelector("header").style.top = "-7.2rem";
   }
   prevScrollpos = currentScrollPos;
}

header {
    background-color: rgb(255, 255, 255);
    height: 7.2rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: top 0.2s ease-in-out;
    z-index: 100;
}

我使用了FluffyKitten提供的第一个答案，效果很好。谢谢。我本来会在那里评论的，但我缺乏这样做的声誉。
为了帮助其他人，在实现FluffyKitten的第一个答案时，我了解到在（a）加载或刷新（页面上还没有滚动，所以没有fixedToTop）与（b）滚动后的fixedToTop之间，页眉和.content的垂直对齐方式略有不同，因为只有正文边距设置为0。
我不仅将body元素的边距设置为0（就像FluffyKitten所做的那样），而且还必须将header和.content元素的顶部边距设置为0，以防止网页第一次加载或刷新时（header不是fixedToTop时）与向上滚动后header是fixedToTop时之间出现微小的垂直布局差异。

你能在WordPress中做到吗？

是的，在WordPress中使用JavaScript和CSS是可以做到的。有几种方法可以做到这一点，但一个常见的方法是使用WordPress插件，允许您添加自定义JavaScript和CSS到您的网站。
一旦你安装了一个插件，你可以按照我上面提到的同样的步骤，在向下滚动时隐藏标题，在向上滚动时显示标题。
下面是一个如何做到这一点的示例：
1.安装并激活插件，如“自定义CSS和JS”或“简单自定义CSS和JS”。
1.创建一个JavaScript文件，并添加上面提到的代码来检测滚动并相应地设置标题的样式：

const header = document.querySelector('#header');

 let previousScrollPosition = 0;

 window.addEventListener('scroll', function() {
   const currentScrollPosition = window.scrollY;

   if (currentScrollPosition > previousScrollPosition) {
     // scroll down
     header.style.transform = 'translateY(-100%)';
   } else {
     // scroll up
     header.style.transform = 'translateY(0)';
   }

   previousScrollPosition = currentScrollPosition;
 });

1.创建CSS文件并添加样式以在向下滚动时隐藏标题：

#header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   transition: all 0.3s ease-out;
   transform: translateY(-100%);
 }

1.在你的WordPress管理面板中，进入“自定义CSS和JS”或“简单自定义CSS和JS”部分，添加你的JavaScript和CSS文件。确保选择应用于你网站上所有页面的选项。
有了这个，你应该有标题隐藏时，向下滚动和出现时，向上滚动在您的WordPress站点。
我希望这能帮助你理解如何在WordPress上做到这一点。