[英]JavaScript code working only in Chrome but not in Firefox, IE, Opera and Safari
[英]Javascript code for scroll effect works in Safari/chrome, not firefox/opera
我有一個帶有導航欄的網頁,該導航欄最初位於頁面頂部下方75px左右。 我編寫了一個腳本,當導航欄到達瀏覽器窗口的頂部時,它將把導航欄固定在瀏覽器窗口的頂部。 在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";
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.