所以，我希望有一个与此处类似的 header http://www.blackmesasource.com/ ，唯一的问题是我对 javascript 和 jquery 一无所知，有人可以帮助我吗？
最佳答案
很好 - 我刚刚为您敲定了这个 - 它很粗糙并且没有进行跨浏览器测试:
<style type="text/css">
body {
padding:0;
margin:0;
}
#hero {
background-color:#eee;
}
nav {
position:absolute;
bottom:0;
left:0;
background-color:#ccc;
box-sizing:border-box;
width:100%;
padding:20px;
}
nav.fixed-position {
position:fixed;
top:0;
bottom:initial;
}
</style>
<body>
<div>
<div id="hero">
<nav id="nav-menu">
Your nav here
</nav>
</div>
<section style="height:2000px;">
content
</section>
</div>
<script type="text/javascript">
var hero = document.getElementById('hero'),
nav = document.getElementById("nav-menu"),
viewportHeight = Math.max(window.innerHeight || 0),
navOffsetTop = nav.offsetTop;
hero.style.height = viewportHeight + 'px';
var hasScrolled = function() {
var fromTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
if (navOffsetTop < fromTop) {
nav.classList.add('fixed-position');
} else {
nav.classList.remove('fixed-position');
}
}
window.addEventListener('scroll', hasScrolled);
</script>
</body>
您可以将其放入一个空文件中，然后在浏览器中运行它以查看结果 - 我在 Firefox 中测试了它，没有任何问题，但正如我所说，它需要额外的工作；如:
- 跨浏览器 - 根据您计划拥有的 IE 支持级别，classList 可能不起作用。
- 优化 - 目前，每次用户滚动时都会触发 hasScrolled 函数，您可能需要找到一种方法来限制这种情况。
- 全局变量 - 我没有尝试为 JS 使用干净的命名空间，您可能还想研究一下其他内容。
此外，这不需要 jQuery，但考虑到我刚刚建议你需要做的事情，你可能想考虑使用它 - 它主要是跨浏览器，如果你不太了解 JS，它会帮助你很多.
关于javascript - 滚动然后固定到 html 中的顶部标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28903485/