fixed div color transition

fixed-div-color-transition.md

Fixed div Color Transition

index.html

<div class="parent">
<div class="page first"><div class="box"></div></div>
  </div>
<div class="parent">
<div class="page second"><div class="box"></div></div>
</div>

style.css

html {
  height: 100%;
  min-height: 100%;
}

body {
  height: 100%;
}

.parent {
  position: relative;
  height: 100%;
}

.page {
  width: 100%;
  height: 100%;
  min-height: 100%;
  clip: rect(0, auto, auto, 0);
  position: absolute;
}

.first {
  background-color: blue;
}

.second {
  background-color: red;
}

.box {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
}

.page.first > .box {
  background-color: yellow;
}

.page.second > .box {
  background-color: green;
}