getElementsByClassName并未选择我所有的导航元素

问题描述

我正在使用HTML，CSS和JavaScript（没有jQuery）创建网站。

I'm creating a Website with HTML, CSS, and JavaScript (no jQuery).

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

I have created the following script to change my Navigation Class when my pageoffset is more than 50 and change it back if its less then 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时，当我非常缓慢地滚动或重新加载页面时，锂元素的更改类别只有一半。

For some reason, when I scroll very slowly or reload the page when my offset is more than 50 only half the li-elements change class.

也许有一个更聪明的解决方案还是有更好的表现？

Maybe there is a smarter solution which also has better performance?

这是我的第一个问题，请对我轻松一点：）

This is my first question, go easy on me please :)

€it ：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;
 }

推荐答案

我真的不知道为什么它不起作用，但我知道它现在可以起作用。我开始使用jquery，并使用以下代码可以正常工作。

I don't really know why it didn't work, but I know it works now. I started using jquery and with the following code it works just fine.

$(document).scroll(function () {
    if (window.scrollY > 50) {
        $(".main-navigation").attr('class', 'main-navigation-scrolled');
    } else {
        $(".main-navigation-scrolled").attr('class', 'main-navigation');
    }
});

这篇关于getElementsByClassName并未选择我所有的导航元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！