1

I'm creating a website with a header that has position: fixed; so that it doesn't move when you scroll the page. However, I also need the main content to be visible but with the fixed element, we cant see the main content. Basically, I first tried to use a margin-top with a certain amount of pixels but then when I resize the window, it stays like that.

What I did was that using Javascript I made it that the margin-top of the main element is equal to the height of the header:

<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();

Also the window.onresize doesn't work

And here is my CSS

.head{
    position: fixed;
    width: 100%;
    border: solid #2196F3 5px;
}
.main {
    grid-area: "main";
    margin: 0px;
}

The problem is that the margin-top doesn't update every time I resize the window but changes every time I reload the page.

Flyse
  • 11
  • 5

1 Answers1

0

I solved the problem with the help of Nullish Byte's comment. If anyone wants to know, it works if you do:

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
Flyse
  • 11
  • 5