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

Question

I am trying to do a nice effect when the header leaves the current block. I want the background color and the color of the text to change when scrolling down.

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
}

An example serves best, something like this https://www.dropbox.com/

Thanks!

Answer 1

So i redid it with some Javascript. This effect is awesome, feel free to improve it if you like! Is this possible to accomplish without 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

The smooth transition you're looking for can be done in CSS, but you'll need some JavaScript in order to initiate the animation.

 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> 

This basically says that when we scroll passed the height of the header (in this case 50px), remove the "top" class from it, and add the "scrolled" class from it. You can use the css selectors header.top and header.scrolled to do your transition animations. Be sure to use transition: background-color (time) (timing function), color (time) (timing function); to achieve the smoothness you're looking for.

Answer 3

You can change it with the class. Like i use this website.

http://www.moumaachi.com/ it has class like this

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

but when scroll down to 50 px then it will showa this

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

and normal it has

<div class="thiswillhide">

but when scroll down more then it wil like this

<div class="thiswillhide hidesearch">

you can use this code

<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>

thanks