Quiero hacer 2 encabezados adhesivos divs en la parte superior cuando se desplaza la página.
El FIRST DIV se queda fijo solo por un tiempo hasta que el SECOND DIV aparece en un punto particular de la pantalla.
Cuando el SECOND DIV , a medida que se desplaza hacia arriba, llega a la mitad de la página (por ejemplo), el FIRST DIV deja de ser pegajoso , se aleja y luego lo reemplaza el SECOND DIV como el siguiente elemento pegajoso en la parte superior.
Me las arreglé para hacer que el primer div se mantuviera en la parte superior con mi CSS , pero no tengo ni idea de qué hacer con el second div .
.body { margin: 0; } h3 { background-color: #E9BDF5; width: 100%; } .firstDiv { text-align: center; background-color: yellow; width: 100%; height: 70px; position: sticky; top: 0; } .secondDiv { text-align: center; background-color: yellow; width: 100%; height: 60px; } <h3>These text don't stick</h3> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and </p> <div class="firstDiv"> <h2>First Div - Becomes sticky (temporarily)</h2> </div> <h3>These text don't stick</h3> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <div class="secondDiv"> <h2>Second Div - Becomes the sticky header</h2> </div> <h3>These text don't stick</h3> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p> <p> This paragraph will scroll up and will not stick at the top </p>Cualquier consejo sobre esto sería muy apreciado. Les agradezco de antemano su amable ayuda 🙏👍♥️