Javascript 当两个div重叠时删除一个类

我使用flexbox将我的内容垂直居中于“main”标记内，但是当添加太多内容时，它会溢出到“header”中。是否有一种方法可以计算，如果div在屏幕上的某个垂直位置（256px-高度设置为header）上方，它将从“main”（当前设置为.vertical）中删除一个类

我知道.removeClass（）会删除该类，但我不知道从何处开始计算垂直位置

HTML

我希望这是有道理的。

---

非常感谢。

我可能误解了您的目标，但您似乎不需要计算屏幕上的位置。因为你有一个导航条，它应该总是可见的，并且内容不应该重叠。我对您的代码做了一些更改，允许内容始终位于标题下方，使用

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>

Nav
所有文本

然后将垂直样式添加到

.content

部分

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;
}

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