我有一个带有导航栏的网页，该导航栏最初位于页面顶部下方 75 像素左右。我写了一个脚本，当导航栏到达浏览器窗口的顶部时，它将把导航栏固定到浏览器窗口的顶部。这在 safari/chrome 中工作正常，但在其他浏览器中不会触发效果。酒吧永远不会切换到其固定模式。我是 html/css/javascript 的新手，所以问题可能很简单。这是代码:
<head>
<link rel="stylesheet" href="foo_css.css" />
<script type="text/javascript">
function window_onload() {
window.addEventListener("scroll",navbar_reset_top,false);
}
var navbar_top=75;
function navbar_reset_top() {
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>navbar_top&&nav.className==="navbar_absolute") {
document.getElementById("nav").className="navbar_fixed";
}
else if(scrollTop<navbar_top&&nav.className==="navbar_fixed") {
document.getElementById("nav").className="navbar_absolute";
}
}
</script>
</head>
<body onload="javascript:window_onload();">
<div id="nav" class="navbar_absolute">
<ul>
这是我认为所有相关的 CSS:
#nav.navbar_fixed {
position:fixed;
top:0px;
}
#nav.navbar_absolute {
position:absolute;
top:74px;
}
最佳答案
这是一个应该在 Firefox 中运行的略微修改的版本。
var nav, navbar_top = 75;
function window_onload() {
nav = document.getElementById("nav");
window.addEventListener("scroll", navbar_reset_top, false);
}
function navbar_reset_top() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// you won't need the && nav.className==="navbar_absolute" part
if(scrollTop > navbar_top && nav.className==="navbar_absolute") {
nav.className="navbar_fixed";
}
// you don't need the check for nav.className==="navbar_fixed" part either
else if(scrollTop < navbar_top && nav.className==="navbar_fixed") {
nav.className="navbar_absolute";
}
}
关于用于滚动效果的 Javascript 代码适用于 Safari/chrome，不适用于 firefox/opera，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11587514/