Tenemos una position: fixed; banner de alerta que aparece en la parte superior de la página para mostrar diferentes alertas. Queremos que tenga una altura (o que parezca tener una altura) para que no cubra el menú superior de la página, sino que empuje el contenido de la página hacia abajo. Cuando el usuario acepta o sale del banner, la página debería volver a aparecer en la parte superior. Cuando el usuario se desplaza hacia abajo en la página, el banner debe flotar en la parte superior de la ventana y permanecer en la pantalla todo el tiempo.
La estrategia actual es muy compleja y usa una función setBannerHeight() por todas partes que le da a un banner arriba de nuestro banner una altura establecida, empujando el contenido de la página principal hacia abajo y permitiendo que el banner parezca 'tomar espacio'.
Se ha demostrado que no está preparado para el futuro y hace cosas como evitar que nuestros banners de aplicaciones inteligentes de iOS (un banner totalmente diferente) aparezcan correctamente.
¿Hay alguna manera de que pueda dar una altura a un elemento fijo, hacer que un elemento fijo flote (hasta ahora no puedo, esto está en un componente alert.component.ts , así que no creo que pueda dar un elemento principal) altura), O, ¿quizás una biblioteca de alertas de terceros que recomendaría que ya haya resuelto esto?
Una forma de hacerlo es cambiar una clase CSS al <body> que coincida con el estado de la alerta (abierto o cerrado). Esta clase afecta el comportamiento del cuerpo, específicamente su top-padding que debe ser igual a la altura de alerta.
Ahora todo lo que tiene que preocuparse es alternar la clase en los eventos adecuados para mostrar/ocultar del componente de alerta.
body.alert-on { padding-top: 60px; } .alert { position: fixed; }Esto puede ayudar. Es simple, usando position: sticky en CSS y algo de JavaScript estándar. La alerta permanece en la parte superior de la página cuando un usuario se desplaza. Desaparece cuando un usuario hace clic en él.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div id="alert">Alert</div> <nav>Menu</nav> <section> <p>Add enough content here so you can scroll the page.</p> </section> </div> <script type="text/javascript" src="script.js"></script> </body> </html> #container { width: 600px; margin: 0 auto; } nav { width: 600px; height: 100px; background: lightblue; } #alert { width: 600px; height: 40px; position: sticky; top: 0; background: orangered; cursor: pointer; } section { width: 600px; } const alert = document.getElementById("alert"); alert.addEventListener("click", function() { alert.style.position = "static"; alert.style.display = "none"; })