Удалите класс, когда два divs перекрываются

Question

Я использовал flexbox для центрирования моего содержимого по вертикали внутри тега 'main', однако при добавлении слишком большого количества содержимого он перетекает в «заголовок». Есть ли способ, который я могу вычислить, если div превышает определенную вертикальную позицию на экране (256 пикселей - высота, заданная как заголовок), он удаляет класс из «основного» (в настоящее время установленного в .vertical).

Я знаю, что .removeClass() удаляет класс, но я не знаю, с чего начать с вычисления вертикальной позиции.

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

Я надеюсь, что имеет смысл. Большое спасибо Спасибо.

Answer 1

Я могу неправильно понять вашу цель, но вам не кажется, что вам нужно рассчитать положение на экране. Поскольку у вас есть панель Nav, она всегда должна быть видимой, а содержимое не должно перекрываться. Я внес несколько изменений в ваш код, который позволяет содержимому всегда сидеть под заголовком, используя 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; 
} 

Если вы все еще хотите, чтобы выровнять текст по-другому, вы можете вложить содержимое внутри другого тега внутри .vertical. Как так:

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

, а затем добавить вертикальные стили в разделе .content.