代码之家 › 专栏 › 技术社区 › Nat

Javascript找不到用于折叠头的元素

css html javascript

Nat · 技术社区 · 6 年前

var navTop = document.getElementsByClassName('main-nav');
window.addEventListener('scroll', function() {
   if(window.pageYOffset > 100) {
     navTop.classList += ' .small';
   } else{
     navTop.classList = 'main-nav';
   };
});

标题:

<div>
  <header class='main-nav'>
    <nav>
      <ul>
        <a href='#aboutme'>
          <li>About Me</li>
        </a>
        <br>
        <a href='#projects'>
          <li>Projects</li>
        </a>
        <br>
        <a href='#experience'>
          <li>Experience</li>
        </a>
        <br>
        <a href='#contactme'>
          <li>Contact Me</li>
        </a>
        <br>
      </ul>
    </nav>
  </header>
</div>

我已经将nav设置为fixed,但是JavaScript什么也没做。相反,每次向下滚动时,它只会显示一个“navTop is null”错误。我的语法或逻辑有什么问题可能导致这种情况吗?如果有更好的方法来制造一个崩溃的头球,我很高兴听到它。

2 回复 | 直到 6 年前

Satpal 6 年前

作为 getElementsByClassName() HTMLCollection ,则需要使用索引元素并对其进行操作。这里是我用的例子 0 对于第一个元素。

也因为你正在使用 classList ,它的方法需要用来操作CSS类

var navTop = document.getElementsByClassName('main-nav');
window.addEventListener('scroll', function () {
    if (window.pageYOffset > 100) {
        navTop[0].classList.add('small')
    } else {
        navTop[0].classList.remove('small')
    };
});

你也可以使用 toggle() 方法由@David建议

classList.toggle('small', window.pageYOffset > 100);

Ankit Agarwal 6 年前

因为类只有一个元素 main-nav querySelector() getElementsByClassName()

将代码更改为:

var navTop = document.querySelector('.main-nav');
window.addEventListener('scroll', function () {
    if (window.pageYOffset > 100) {
        navTop.classList.add('small')
    } else {
        navTop.classList.remove('small')
    };
});

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前