保持 div 停留在位置，但让页脚将其启动

Question

标题可能听起来很奇怪，但我想通过菜单实现一些目标。

我在 jsfiddle 中嘲笑它，因为一个例子告诉了超过 1000 个单词 :)

页面内容（黄色）在标题（红色）下方滚动。左侧的菜单（蓝色）应保留在原位。这可以通过使用position: fixed 来完成。但是……

如果我们进一步滚动，页脚就会出现。如果我们进一步滚动，main 的大小（在红线和绿线之间）会变得更小，然后蓝色导航元素的高度。我现在希望将蓝色元素推到红色标题元素下方。

所以本质上蓝色元素应该坚持到它当前的位置，但是如果红线和绿线之间的高度变得小于导航元素的高度，它应该被页脚向上推。

我怎样才能让蓝框粘住但又让它被绿色页脚向上推？

Answer 1

我认为您正在寻找的是 Intersection Observer。 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

但是，请结帐： https://caniuse.com/#search=intersectionObserver

--- 但是有polyfills

或者也许 css 向导可以提出更好的解决方案:)

*编辑 实际上，你可以用一点 css 来做到这一点......它并不完美，但朝着更好的方向迈出了一步

header {
  position: fixed;
  width: 100%;
  height: 100px;
  top: 0;
  z-index: 2;
}

nav {
  height: 200px;
  outline: 1px solid blue;
  position: sticky;
  top: 0;
}

footer {
  height: 300px;
  margin-bottom: 10rem;
}