javascript - getElementsByClassName 没有选择我所有的导航元素

Question

我正在使用 HTML、CSS 和 JavaScript(没有 jQuery)创建一个网站。

我创建了以下脚本来在我的 pageoffset 大于 50 时更改我的导航类，如果它小于 50 则将其改回:

window.onscroll = function (event) {
var nav = document.getElementsByClassName('main-navigation');
var navscr = document.getElementsByClassName('main-navigation-scrolled');
 if (window.pageYOffset > 50) {
    for(var i = 0; i < nav.length; i++) {
    nav[i].className = 'main-navigation-scrolled';
    }
 }
 else {
 if (window.pageYOffset < 50) {
    for(var i = 0; i < navscr.length; i++) {
    navscr[i].className = 'main-navigation';
    }
 }
 }
}

出于某种原因，当我的偏移量超过 50 时，当我非常缓慢地滚动或重新加载页面时，只有一半的 li 元素会更改类。

也许有更智能的解决方案也有更好的性能？

这是我的第一个问题，请放轻松:)

€编辑:HTML

<div id="nav-menu-container-fix">
<ul>
  <li><a class="main-navigation" href="index.html">Home</a></li>
  <li><a class="main-navigation" href="about.html">About</a></li>
  <li><a class="main-navigation" href="#">Team</a></li>
  <li><a class="main-navigation" href="#">24 Weeks</a></li>
  <li><a class="main-navigation" href="#">Donate</a></li>
  <li><a class="main-navigation" href="#">Downloads</a></li>
  <li><a class="main-navigation" href="#">Forum</a></li>
  </ul> 
</div>

Aaaa 和 CSS

 a.main-navigation {
 padding:18px 15px 15px 15px;
 background-color:#222222;
 color:#bbbbbb;
 display:inline-block;
 text-decoration:none;
  -webkit-transition: all 600ms ease;
 -moz-transition: all 600ms ease;
 -ms-transition: all 600ms ease;
 -o-transition: all 600ms ease;
 transition: all 600ms ease;
 }

 a.main-navigation:hover {
 padding:18px 15px 15px 15px;
 background-color:#555555;
 color:#ffffff;
 display:inline-block;
 text-decoration:none;
  -webkit-transition: all 600ms ease;
 -moz-transition: all 600ms ease;
 -ms-transition: all 600ms ease;
 -o-transition: all 600ms ease;
 transition: all 600ms ease;
 }

 a.main-navigation-scrolled {
 padding:7.5px 15px 7.5px 15px;
 background-color:#604D9D;
 color:#eeeeee;
 display:inline-block;
 text-decoration:none;
  -webkit-transition: all 600ms ease;
 -moz-transition: all 600ms ease;
 -ms-transition: all 600ms ease;
 -o-transition: all 600ms ease;
 transition: all 600ms ease;
 }

 a.main-navigation-scrolled:hover {
 padding:7.5px 15px 7.5px 15px;
 background-color:#402c6c;
 color:#ffffff;
 display:inline-block;
 text-decoration:none;
  -webkit-transition: all 400ms ease;
 -moz-transition: all 600ms ease;
 -ms-transition: all 600ms ease;
 -o-transition: all 600ms ease;
 transition: all 600ms ease;
 }

Answer 1

滚动事件将在您滚动时被调用数百次。因此，当条件匹配时，您只需要执行一次操作。

下面会减少dom访问

var scrolled = false; // initially page is not scrolled

window.onscroll = function (event) {
    if (window.pageYOffset > 50 && !scrolled) { //perform following only if it's not done already
        var nav = document.querySelectorAll('main-navigation');
        for (var i = 0; i < nav.length; i++) {
            nav[i].className = 'main-navigation-scrolled';
            scrolled = true; // applied scroll class no need to do this again
        }
    } else if (window.pageYOffset < 50 && scrolled) { //perform the following only it's not done already
        var navscr = document.querySelectorAll('main-navigation-scrolled');
        for (var i = 0; i < navscr.length; i++) {
            navscr[i].className = 'main-navigation';
            scrolled = false; // applied no scroll class, no need to do it again
        }
    }
}

更新:working fiddle