如何使sidenav增加/减少高度，以始终填满整个网页

Question

我一直在尝试制作一个具有标题（顶部）、sidenav（左侧）和网站主要内容的网站。现在这里是一个布局示例

https://jsfiddle.net/qdza4bxc/1/

现在，在学习了一点 JavaScript 之后，我做了一个函数，可以在页面滚动时增加/减少 sidenav 的顶部填充，下面是示例：

https://jsfiddle.net/4vtuq6m8/

但这会在侧导航内部的顶部留下一个很大的空隙。所以我想知道 w3school 是如何做到这一点的，当您向下滚动他们的页面时：https://www.w3schools.com/html/default.asp 您可以看到当您向下滚动他们的网站时，侧边栏的高度和内容始终保持在完美的位置。

如果有人对此有解决方案，我会很高兴！

Answer 1

var header = document.querySelector('header');
var headerHeight = header.offsetHeight;
var sidebar = document.querySelector('#sidebar');

document.addEventListener('scroll', function(e) {
  // Check how many pixels have been scrolled
  var scrollTop = document.documentElement.scrollTop;
  // offset should never be higher than the header
  scrollTop = scrollTop > headerHeight ? headerHeight : scrollTop;
  // Calculate the final offset to apply to the height
  var offsetTop = headerHeight - scrollTop;

  sidebar.style.height = 'calc(100% - ' + offsetTop + 'px)';
});

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

header {
  width: auto;
  height: 100px;
  background-color: indianred;
}

#sidebar {
  width: 20%;
  height: calc(100% - 100px);
  position: fixed;
  bottom: 0;
  background-color: gray;
  float: left;
  overflow-y: auto;
}

#sidebar h2 {
  margin: 0;
}

section {
  width: 80%;
  float: right;
  background-color: antiquewhite;
}

<header></header>
<div id="sidebar">
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Soon done</h2>
  <h2>Done!</h2>
</div>
<section>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
</section>