如何制作可变高度的固定 header

Question

我正在尝试创建一个高度可变的固定 header。我会自己解释一下，假设您进入该站点并且 header 是可见的，并且它的高度为 40 像素。向下滚动后 header 现在是 30px，并且已修复。我怎样才能做到这一点？我知道我应该写一些代码，但我不知道从哪里开始。我知道如何制作固定 header 但不知道如何实现可变高度功能。非常欢迎任何建议或代码片段。

Answer 1

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

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>

Answer 2

您可以通过嵌套 position: sticky; 元素并使用纯 CSS 来做到这一点，并将导航栏作为位置 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>

如何制作可变高度的固定 header

How to make a fixed header with variable height

html

javascript

css

height

header