在我的示例中，如果文档向下滚动一定量，导航 - 嵌入在标题中 - 应该固定在浏览器窗口的顶部。
等效脚本到目前为止有效，但在 firefox 和 chrome 中显示以下问题(但在 edge 和 IE11 中没有):
如果文档向下滚动且导航固定 - 然后按下浏览器的重新加载按钮或 F5 键，或者当我离开页面然后返回时，导航保持固定。
我试图在每次加载事件中删除“.fixed”类，但当然它不会生效，因为没有真正的重新加载。
我认为这种行为只能在单独的文档中重现？!
有人能告诉我如何解决这个问题吗？
var header, nav, navtop, verticalpos;
function fixed_nav() {
"use strict";
verticalpos = window.pageYOffset;
if (verticalpos >= navtop) {
nav.setAttribute('class', 'fixed');
} else {
nav.removeAttribute('class');
}
}
function init() {
"use strict";
header = document.getElementsByTagName('header')[0];
nav = header.getElementsByTagName('nav')[0];
navtop = nav.getBoundingClientRect().top;
}
window.addEventListener('load', init, false);
window.addEventListener('scroll', fixed_nav, false);* {
padding: 0px;
margin: 0px;
}
header {
height: 15rem;
background-color: lightpink;
}
nav {
height: 5rem;
background-color: lightblue;
}
main {
background-color: lightsalmon;
display: block;
/* IE 11 */
}
div {
max-width: 25rem;
background-color: rgba(0, 0, 0, 0.2);
margin: auto auto auto auto;
}
header>div {
height: 10rem;
}
nav>div {
height: 100%;
}
main>div {
padding: 2rem 0rem 2rem 0rem;
}
section {
padding: 0rem 2rem 0rem 2rem;
}
h2,
p:not(:last-of-type) {
margin: auto auto 2rem auto;
}
.fixed {
position: fixed;
top: 0rem;
width: 100%;
transform: translate3d(0, 0, 0);
/* translateZ-hack */
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fixed</title>
</head>
<body>
<header>
<div></div>
<nav>
<div></div>
</nav>
</header>
<main>
<div>
<section>
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
</section>
</div>
</main>
</body>
</html>最佳答案
我已经在 chrome 中测试了你的代码，你应该在你的 init 函数中添加对 fixed_nav 函数的调用。 这将解决背部问题。
关于javascript - 页面重新加载后固定导航的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52596149/