javascript - 向下滚动时的 CSS 标题效果(更改背景和颜色)

Question

当 header 离开当前 block 时，我试图做一个很好的效果。我希望向下滚动时背景颜色和文本颜色发生变化。

html:

<header class="green">Logo</header>
<header class="red">Logo</header>

<section id='content1'>
  <h1>Content</h1>
  <p>Goes here!</p>
</section>
<section id='content2'>
  <h1>Content</h1>
  <p>Goes here!</p>
</section>

CSS:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  position: fixed;
  display: block;
  top: 0;
  font-size: 20pt;
  padding: 15px 10px
}

.green {
  background: green;
  color: #000;
  z-index: 2

}
.red {
  background: red;
  color: #fff;
  z-index: 1
}

section {
  position: relative;
  height: 500px;
  padding: 100px 10px
}

#content1 {
  background: #D9D9D9;
  z-index: 1
}

#content2 {
  background: #9FDAD0;
  z-index: 2
}

最好举个例子，像这样https://www.dropbox.com/

谢谢!

Answer 1

所以我用一些 Javascript 重做了它。这个效果太棒了，如果你喜欢，请随意改进它!这可以在没有 Javascript 的情况下完成吗？

const secondBlock = document.getElementById('content2')
const header = document.getElementsByTagName('header')
const headerHeight = 61

function setHeader () {
  const scrollPoint = window.pageYOffset + headerHeight

  let blockPoint = 61 - (scrollPoint - secondBlock.offsetTop)
  if (blockPoint <= 0) { blockPoint = 0 }

  if (scrollPoint > secondBlock.offsetTop) {
    header[0].style = `max-height: ${blockPoint}px;`
  } else {
    header[0].style = `max-height: ${headerHeight}px;`
  }
  window.requestAnimationFrame(setHeader)
}

window.requestAnimationFrame(setHeader)

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  display: block;
  font-size: 20pt;
  height: 61px;
  line-height: 61px;
  padding-left: 10px;
  position: fixed;
  top: 0;
  width: 100%;
}

header#first {
  background: #8292C3;
  color: #000;
  overflow: hidden;
  z-index: 10;
}

header#second {
  background: #82C3B9;
  color: #fff;
  z-index: 9;
}

section {
  height: 500px;
  padding: 100px 10px;
  position: relative;
}

#content1 {
  background: #96A6D5;
}

#content2 {
  background: #99D6CC;
}

<header id='first'>Logo - <small>scroll down to see the magic!</small></header>
<header id='second'>Logo - <small>scroll down to see the magic! COOL!</small></header>

<section id='content1'>
  <h1>Content</h1>
  <p>Goes here!</p>
</section>
<section id='content2'>
  <h1>Content</h1>
  <p>Goes here!</p>
</section>