Question

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

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

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

https://jsfiddle.net/4vtuq6m8/

但是这在sidenav内部的顶部留下了很大的空隙。因此，我想知道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>

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

1 个答案: