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重做了。这个效果很棒，如果您愿意，可以随时加以改善！如果没有Java语言，这是否可以完成？

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>

谢谢

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

3 个答案: