Tengo un sitio web simple con algunos divs. Cuando giro la vista de horizontal a vertical, debería comportarse así:
https://www.loom.com/share/c7cab98155aa4f05a9a8f6319625fbc6
Pero se comporta así:
https://www.loom.com/share/b43c6c51792f49a29a3d9582d9fffc4c
La única diferencia está en el segundo ejemplo, el div #nav es una posición fija.
Parece que este extraño comportamiento en la rotación ocurre cuando:
¿Hay alguna manera de hacer que permanezca en la misma posición en la rotación cuando el div de navegación es pegajoso y otros divs tienen altura en las unidades vh?
Gracias de antemano por su ayuda.
body { margin: 0px; } p { display: block; margin:0px; height: 30px; } div { height: 100vh; width: 100%; } #first { background-color: green; } #second { background-color: blue; } #third { background-color: red; } #fourth { background-color: cyan; } #fifth { background-color: pink; } #sixth { background-color: orange; } #nav { height: 70px; position: fixed; top:0px; background: black; opacity: 50%; } <head> <meta content="width=device-width, initial-scale=1" name="viewport"> </head> <body> <div id="nav"> </div> <div id="first"> <p>Some text in the first div</p> </div> <div id="second"> <p>Some text in the second div</p> </div> <div id="third"> <p>Some text in the third div</p> </div> <div id="fourth"> <p>Some text in the fourth div</p> </div> <div id="fifth"> <p>Some text in the fifth div</p> </div> <div id="sixth"> <p>Some text in the sixth div</p> </div> </body> </html>position: absolute; en el lugar de la position: fixed; para la barra de navegación superior.
Creo que encontré una solución. No estoy seguro de si es la mejor solución posible, pero en este momento está bien para mí.
aquí está el enlace al comportamiento correcto:
https://www.loom.com/share/42edf3921c4349eab586fc176892c381
Aquí está el código que resolvió el problema:
let divnav = document.querySelector('#nav'); window.addEventListener("orientationchange", () =>{ console.log('on orientation change - nav disappearing ...') divnav.style.display = 'none'; }) window.addEventListener("resize", () => { console.log('on resize - nav appearing again ;) '); divnav.style.display = 'block'; }) body { margin: 0px; } p { display: block; margin:0px; height: 30px; } div { height: 100vh; width: 100%; } #first { background-color: green; } #second { background-color: blue; } #third { background-color: red; } #fourth { background-color: cyan; } #fifth { background-color: pink; } #sixth { background-color: orange; } #nav { height: 70px; position: fixed; top:0px; background: black; opacity: 50%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="styles.css"> <meta content="width=device-width, initial-scale=1" name="viewport"> </head> <body> <div id="nav"> </div> <div id="first"> <p>Some text in the first div</p> </div> <div id="second"> <p>Some text in the second div</p> </div> <div id="third"> <p>Some text in the third div</p> </div> <div id="fourth"> <p>Some text in the fourth div</p> </div> <div id="fifth"> <p>Some text in the fifth div</p> </div> <div id="sixth"> <p>Some text in the sixth div</p> </div> </body> <script src="myscirpt.js"></script> </html>agregar z-index: 10; en #nav en su solución.