在我的示例中，如果文档向下滚动一定量，则嵌入在标题中的导航应固定在浏览器窗口的顶部。
等效的脚本到目前为止有效，但在 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函数的调用。 这将解决后面的问题。
通过添加两个附加事件 pageshow 和 pagehide 解决了我的问题，以确保在使用重置按钮、前进/后退按钮或 f5 键后从缓存中返回文档，也可以重置(固定(导航。
var html, 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";
html = document.documentElement;
header = document.getElementsByTagName('header')[0];
nav = header.getElementsByTagName('nav')[0];
navtop = nav.getBoundingClientRect().top;
}
window.addEventListener('load', init, false);
window.addEventListener('pageshow', function() {
html.scrollTop = 0;
navtop = nav.getBoundingClientRect().top;
}, false);
window.addEventListener('pagehide', function() {
html.scrollTop = 0;
nav.removeAttribute('class');
}, 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>1(将其包含在您的html文件中 2(固定导航的位置。 3(使用媒体查询。