Remove a class when two divs overlap

Question

I have used flexbox to center my content vertically inside of 'main' tag, however when too much content is added it spills over into the 'header'. Is there a way I can calculate that if the div goes above a certain vertical position on screen (256px - height set as header), it removes a class from the 'main' (currently set to .vertical).

I know that the .removeClass() removes the class, but I dont know where to start with the vertical position calculation.

HTML

<header>Nav</header>
<main class="vertical">A lot of text here</main>

CSS

body, html{margin:0; height:100%}

header{width:100%; height:256px; background:red;}
main{width:100%; height: calc(100% - 256px); background:#fff;}

.vertical{
display: flex;
flex-direction: column;
justify-content: center;
}

Fiddle

I do hope that makes sense. Many thanks Thanks.

Answer 1

I may misunderstand your goal, but it doesn't seem like you need to calculate the position on the screen. Since you have a Nav bar, it should always be visible and the content shouldn't overlap. I made a few changes to your code that allows the content to always sit underneath the header using justify-content: flex-start.

body, html {
  margin: 0;
  height: 100%
}

header {
  display: block;
  width: 100%;
  height: 256px;
  background: red;
}

main {
  width: 100%;
  height: 100%;
  background: #fff;
 }

.vertical{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

If you still want to align the text differently, you could nest the content within another tag inside .vertical. Like so:

<header>Nav</header>
<main class="vertical">
  <p class="content">all the text...</p>
</main>

And then add vertical styles to the .content section.