问题

Question

我是Java的新手。我只想问为什么会出现此错误：无法设置/读取null的属性'classList'。我希望垂直滚动超过50像素时显示类“ img”。

这是我的代码：

window.onscroll = function() {
  titleShow();
  pShow();
  imgShow();
}



function titleShow() {
  let scrollPos = window.scrollY;
  let title = document.querySelector('.title');
  let titlePos = title.getBoundingClientRect().top;
  let silma = document.querySelector('.silma');

  if (scrollPos > titlePos) {
    title.classList += ' title-show';
  } else {
    title.classList = 'title';
  }
  if (scrollPos > (titlePos + 50)) {
    silma.classList += ' silma-red';
  } else {
    silma.classList = ' silma';
  }
}

function pShow() {
  let scrollPos = window.scrollY;
  let p = document.querySelector('p');

  if (scrollPos > 50) {
    p.classList = 'p-hide';
  } else {
    p.classList = '';
  }
}

function imgShow() {
  let scrollPos = window.scrollY;
  let img = document.querySelector('.img');

  if (scrollPos > 50) {
    img.classList.add('img-show');
  } else {
    img.classList = '';
  }
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #000;
  color: #4f4f4f;
  height: 1000px;
  font-family: Verdana, sam-serif;
}

p {
  text-align: center;
  font-size: 1.2em;
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  transition: transform .6s, opacity .8s;
}

.p-hide {
  transform: translate(-50%, -80%);
  opacity: 0;
}

.img {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('https://pbs.twimg.com/media/Cvl56RGVUAAEM5V.jpg') no-repeat;
  background-size: cover;
  z-index: -1;
  transition: 2s ease .4s;
  opacity: 0;
}

.img-show {
  opacity: .5;
}

.title {
  transform: translate(-50%, -100%);
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-align: center;
  opacity: 0;
  transition: .7s;
}

.title-show {
  transform: translate(-50%, 0%);
  opacity: 1;
  transition: .7s;
}

.silma {
  font: 5em 'Creepster', cursive;
  font-weight: 700;
  transition: 1s;
  display: block;
  margin-top: -10px;
}

.silma-red {
  background: -webkit-linear-gradient(#ffbf02 30%, #4f0000 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Creepster" rel="stylesheet">
</head>

<body>
  <p>Scroll down to see effect</p>
  <h1 class="title">Tom Hardy as<span class="silma">Wolverine</span></h1>
  <div class="img"></div>
</body>

</html>

我不知道为什么会出现无法设置/读取null的属性'classList'的错误。

Answer 1

问题

在imgShow函数中，您可以执行以下操作：

img.classList = '';

您删除img类。然后，当您再次滚动时，document.querySelector('.img')将不对应任何内容，而将是null。

解决方案

您可以这样编写函数：

function imgShow() {
  let scrollPos = window.scrollY;
  let img = document.querySelector('.img');

  if (scrollPos > 50) {
    img.classList.add('img-show');
  } else {
    img.classList.remove('img-show'); // <--------- this allows you to keep the `img` class
  }
}

香草Javascript-window.onscroll。滚动时为什么不显示“ <div class =“ img”> </div>”

1 个答案:

问题

解决方案