Skip to content

Instantly share code, notes, and snippets.

@mubraska
Last active February 11, 2020 16:00
Show Gist options
  • Save mubraska/dee3bc0daba9d748aa50a8c5cb924368 to your computer and use it in GitHub Desktop.
Save mubraska/dee3bc0daba9d748aa50a8c5cb924368 to your computer and use it in GitHub Desktop.
fixed div color transition

Fixed div Color Transition

<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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment