Estoy tratando de jugar con tener una página que tiene algunas piezas de contenido de alto/ancho completo, y la primera vista tiene un encabezado. A medida que comienza a desplazarse, el encabezado disminuye de tamaño y pasa a una nueva posición en un encabezado fijo en la parte superior de la página. Intenté hacer esto aquí: https://codepen.io/ady-coding/pen/BaZgrqM
Me las arreglé para hacer que funcionara, pero tan pronto como configuré el div principal para usar flex para poder colocar el encabezado bien en el centro de la pantalla, la transición no funciona correctamente y simplemente salta a su nuevo posición. ¿Alguna idea de dónde me estoy equivocando?
window.onscroll = function() {myFunction()}; function myFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("page-heading").className = "fixed-header"; } else { document.getElementById("page-heading").className = "page-name"; } } * { box-sizing: border-box; margin: 0; padding: 0; } #content-1 { width: 100vw; height: 100vh; background-color: green; display: flex; justify-content: center; } #content-2 { width: 100vw; height: 100vh; background-color: purple; } #content-3 { width: 100vw; height: 100vh; background-color: blue; } .page-name { position: relative; background-color: pink; margin: auto 0; transition: all 0.3s ease-in; padding: 0 200px; font-size: 40px; } .body-copy { position: relative; top: 50%; background-color: white; margin: 0 auto; text-align: center; width: 400px; } .fixed-header { position: fixed; top: 10px; left: 0px; background-color: pink; margin: auto 200px; transition: all 0.3s ease-in; } <div id="container"> <div class="row"> <div class="col"> <div id="content-1"> <div id="page-heading" class="page-name"> Projects </div> </div> <div id="content-2"> <div class="body-copy"> This is some other content </div> </div> <div id="content-3"> <div class="body-copy"> This is some other content </div> </div> </div> </div> </div>¿Sería un problema si la posición page-heading fuera fija desde el principio? También agregué top 40vh.
window.onscroll = function() { myFunction() }; function myFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("page-heading").className = "fixed-header"; } else { document.getElementById("page-heading").className = "page-name"; } } * { box-sizing: border-box; margin: 0; padding: 0; } #content-1 { width: 100vw; height: 100vh; background-color: green; display: flex; justify-content: center; } #content-2 { width: 100vw; height: 100vh; background-color: purple; } #content-3 { width: 100vw; height: 100vh; background-color: blue; } .page-name { position: fixed; background-color: pink; margin: auto 0; top: 40vh; transition: all 0.3s ease-in; padding: 0 200px; font-size: 40px; } .body-copy { position: relative; top: 50%; background-color: white; margin: 0 auto; text-align: center; width: 400px; } .fixed-header { position: fixed; top: 10px; background-color: pink; margin: auto 200px; transition: all 0.3s ease-in; } <div id="container"> <div class="row"> <div class="col"> <div id="content-1"> <div id="page-heading" class="page-name"> Projects </div> </div> <div id="content-2"> <div class="body-copy"> This is some other content </div> </div> <div id="content-3"> <div class="body-copy"> This is some other content </div> </div> </div> </div> </div>Gracias por el consejo. Así que veo que realmente no puedo hacer la transición desde diferentes estados de posición. En su lugar, lo he abordado utilizando su sugerencia de tener el contenido configurado como fijo y, en cambio, cambiar el tamaño del contenedor y el tamaño de la fuente, y eso parece haber funcionado.
window.onscroll = function() {myFunction()}; function myFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("header").className = "fixed-header"; } else { document.getElementById("header").className = "header"; } } * { box-sizing: border-box; margin: 0; padding: 0; } .header { position: fixed; width: 100vw; height: 100vh; background-color: orange; display: flex; transition: all 0.3s ease-in; } #content-1 { width: 100vw; height: 100vh; background-color: green; display: flex; justify-content: center; align-content: center; text-align: center; } #content-2 { width: 100vw; height: 100vh; background-color: purple; } #content-3 { width: 100vw; height: 100vh; background-color: blue; } .page-name { background-color: pink; margin: auto 0; transition: all 0.3s ease-in; padding: 0 200px; font-size: 40px; } .body-copy { position: relative; top: 50%; background-color: white; margin: 0 auto; text-align: center; width: 400px; } .fixed-header { position: fixed; transition: all 0.3s ease-in; height: 100px; width: 100vw; background-color: orange; display: flex; z-index: 1; } .fixed-header h1 { font-size:20px; transition: all 0.3s ease-in; } <div id="container"> <div class="row"> <div class="col"> <div id="header" class="header"> <div id="page-heading" class="page-name"> <h1>Projects</h1> </div> </div> </div> </div> <div class="row"> <div class="col"> <div id="content-1"> </div> <div id="content-2"> <div class="body-copy"> This is some other content </div> </div> <div id="content-3"> <div class="body-copy"> This is some other content </div> </div> </div> </div> </div>