position:fixed can do this
body {
height: 300rem;
margin: 0;
}
#main-container {
height: 100%;
background-color: red;
clip-path:inset(0); /* to clip the position:fixed to its container */
overflow:auto;
}
#header,
#headerSomeDiv{
width: 100%;
height: 2rem;
background-color: blue;
position: fixed;
top: 0;
}
#headerSomeDiv {
background-color: green;
color: white;
}
h1 {
margin:0;
}
#someDiv {
position: relative;
height: 20rem;
background-color: purple;
margin-top: 30rem;
clip-path:inset(0); /* to clip the position:fixed to its container */
}
<body>
<div id="main-container">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="someDiv">
<div id="headerSomeDiv">
<h1>HEADER</h1>
</div>
</div>
</div>
</body>
I have a project that contains a header. This header consists of a certain background color and text color. These colors aren’t going well with one part of the website. So I want to transition the header to different colors. But I want the colors to change gradually at the border and not swap immediately.
The headers should transition from one color to the other at the border of the container when entering and leaving. But I don’t seem to get this to work.
body {
height: 300rem;
margin: 0;
padding: 0;
}
#main-container {
width: 100%;
height: 100%;
background-color: red;
}
#header {
width: 100%;
height: 2rem;
background-color: blue;
position: sticky;
top: 0;
}
#someDiv {
position: relative;
width: 100%;
height: 20rem;
background-color: purple;
margin-top: 30rem;
}
#headerSomeDiv {
width: 100%;
height: 2rem;
background-color: green;
color: white;
position: sticky;
top: 0;
}
<body>
<div id="main-container">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="someDiv">
<div id="headerSomeDiv">
<h1>HEADER</h1>
</div>
</div>
</div>
</body>
@herosuper is right, you need to use transition. In fact, the example you shared in your comment uses this property:
But how can I cut off a part of each div using height, opacity or color? I mean if I use height and make that transition then the words inside the div would still be visible. I don’t get how to make this work using transitions.
