Код JavaScript для эффекта прокрутки работает в Safari/ Chrome, а не в Firefox/ Opera

Question

Код JavaScript для эффекта прокрутки работает в Safari/ Chrome, а не в Firefox/ Opera

У меня есть веб-страница с навигационной панелью, которая изначально существует в 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;
}

0

javascript html css browser scrolltop

Источник

user1541805 20 июл '12 в 22:01

1 ответ

Другие вопросы по тегам javascript html css browser scrolltop

user1500082 21 июл '12 в 01:35 2012-07-21 01:35 · Answer 1 · 2012-07-21 01:35

Вот немного измененная версия, которая должна работать в 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";
      }
   }