向下滚动时的 CSS Header 效果（更改背景和颜色）

Question

当标题离开当前块时，我试图做一个很好的效果。我希望在向下滚动时改变背景颜色和文本颜色。

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>

Answer 2

您正在寻找的平滑过渡可以在 CSS 中完成，但您需要一些 JavaScript 才能启动动画。

window.onscroll = function(){
		var top = window.scrollY;
		console.log('Top: ' + top);
                var header = document.getElementsByTagName('header');
                var offset = header.innerHeight; //changed offset to be dynamic, so it works on mobile screens.
		if(top > offset){
		    header[0].classList.remove('top');
		    header[0].classList.add('scrolled');
		} else {
                    header[0].classList.remove('scrolled');
                    header[0].classList.add('top');
                }
	};

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
	position: relative;
}
header {
  width: 100%;
  position: fixed;
  height: 75px;
  display: block;
  top: 0;
  z-index: 100;
  font-size: 20pt;
  padding: 15px 10px
}
header.top {
  background: #222;
  color: #fff;
  transition: all 0.3s ease;
}

header.scrolled {
	background: #555;
	color: #e0e0e0;
transition: all 0.3s ease;
}

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

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

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

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

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

	<header class="top">Logo</header>
	<section id='content1'>
  <h1>Content</h1>
  <p>Goes here!</p>
</section>
<section id='content2'>
  <h1>Content</h1>
  <p>Goes here!</p>
</section>

这基本上说，当我们滚动通过标题的高度（在本例中为 50px）时，从中删除“top”类，并从中添加“scrolled”类。您可以使用 css 选择器 header.top 和 header.scrolled 来制作过渡动画。请务必使用transition: background-color (time) (timing function), color (time) (timing function); 来实现您正在寻找的平滑度。

Answer 3

您可以使用班级更改它。就像我使用这个网站一样。

http://www.moumaachi.com/ 它有这样的课程

 <div class="header-v2 navbar-fixed-top">

但是当向下滚动到 50 像素时，它会显示这个

<div class="header-v2 navbar-fixed-top top-nav-collapse">

正常有

<div class="thiswillhide">

但是当向下滚动时，它会像这样

<div class="thiswillhide hidesearch">

您可以使用此代码

<script>
    //jQuery to collapse the navbar on scroll
    $(window).scroll(function() {
        if ($(".header-v2").offset().top > 50) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
        }
        if ($(".header-v2").offset().top > 600) {
            $(".thiswillhide").addClass("hidesearch");
        } else {
            $(".thiswillhide").removeClass("hidesearch");
        }
    });
</script>

谢谢