Estoy creando un sitio web con un encabezado que tiene position: fixed; para que no se mueva al desplazar la página. Sin embargo, también necesito que el contenido principal sea visible, pero con el elemento fijo, no podemos ver el contenido principal. Básicamente, primero traté de usar un margen superior con una cierta cantidad de píxeles, pero luego, cuando cambio el tamaño de la ventana, permanece así.
Lo que hice fue que usando Javascript hice que el margen superior del elemento principal sea igual a la altura del encabezado:
<div class="head" id="head"> </div> <div class="item main" id="main"> </div> function margintopchange() { var main = document.getElementById('main'); var head = document.getElementById('head').getBoundingClientRect(); newhead = head.height.toString(); main.style.marginTop = newhead + "px"; console.log(head.height); console.log(main.style.marginTop); } window.onresize = margintopchange(); También el window.onresize no funciona
Y aquí está mi CSS
.head{ position: fixed; width: 100%; border: solid #2196F3 5px; } .main { grid-area: "main"; margin: 0px; }El problema es que el margen superior no se actualiza cada vez que cambio el tamaño de la ventana, sino que cambia cada vez que recargo la página.
Resolví el problema con la ayuda del comentario de Nullish Byte. Si alguien quiere saber, funciona si lo hace:
function marginheader() { var main = document.getElementById('main'); var head = document.getElementById('head').getBoundingClientRect(); newhead = head.height.toString(); main.style.marginTop = newhead + "px"; } window.addEventListener('resize', function(event) { marginheader() }, true); marginheader() //this is so that there is a margin at the beginning