如何制作具有可变高度的固定标题答案

【问题标题】：How to make a fixed header with variable height如何制作具有可变高度的固定标题
【发布时间】：2021-12-20 10:19:08
【问题描述】：

我正在尝试创建一个高度可变的固定标题。我会解释一下，假设你进入网站并且标题是可见的，它是 40px 的高度。一旦你向下滚动标题现在是 30px，它是固定的。我怎样才能做到这一点？我知道我应该写一些代码，但我不知道从哪里开始。我知道如何制作固定标题但不知道如何实现可变高度功能。非常欢迎任何建议或代码 sn-ps。

【问题讨论】：

标签： javascript html css header height

【解决方案1】：

您可以使用纯 CSS 嵌套 position: sticky; 元素，并将导航栏作为位置 top: -10px

您将<nav> 设置为40px 的固定高度
然后你使用nav { position: sticky; top: -10px; }。这将允许导航栏从视口滚动 10 像素，使其高度为 30 像素可见。
要使链接或文本等内容不离开视口，您可以将它们包装在另一个元素中并同时应用display: sticky;。现在使用top: 0; 来防止这些元素离开视口。

nav {
  position: sticky;
  top: -10px;
  height: 40px;
  background-color: red;
}

nav > div {
  position: sticky;
  top: 0;
}


/* for scrolling purpose only */
body {
  min-height: 500vh;
  margin: 0;
}

/* if you want the text vertically centered */
nav {
  display: flex;
  align-items: center;
}

nav > div {
  display: flex;
  align-items: center;
  height: 30px;
}

<nav>
  <div>Test</div>
</nav>

【讨论】：

【解决方案2】：

我认为这段代码可以帮助你。

window.onscroll = function() {
  var header = document.getElementsByTagName('header')
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
      header[0].classList.add('header-scroll');
  } else {
      if (header[0].classList.contains("header-scroll")) {
          header[0].classList.remove('header-scroll');
      }
  }
}

.container {
  height: 200vh;
  padding-top: 40px;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: green;
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  height: 40px;
  transition: all .3s ease;
}
.header-scroll {
  height: 30px;
}

<div class="container">
<header>
</header>
<p>Scroll me</p>
</div>

【讨论】：