classList.add（）在JavaScript中不起作用

Question

我试图按照此处的教程将我的网站的社交分享栏滚动显示。

链接到我的网站： https : //www.staging5.howtostudycantonese.com/how-to-say-crazy-in-cantonese/

我对代码进行了一些修改，但不知何故。 我已经用检查员测试了所有内容，发现滚动到上方时，社交共享栏元素的类别没有改变。 我相信classList.add是那里的问题。 我不确定为什么它不起作用。

我正在使用的代码：

window.onscroll = function() {myFunction()};

var header = document.querySelector("div.wp-socializer.wpsr-buttons.wpsr-row-1");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

Answer 1

您要在元素加载之前设置变量，这就是为什么它们为null的原因。

使用onload函数可以避免这种情况：

var header; 
var sticky;

window.onload = function () {
    header = document.querySelector("div.wp-socializer.wpsr-buttons.wpsr-row-1");
    sticky = header.offsetTop;
}

Answer 2

您必须在myFunction中的以下行

var header = document.querySelector("div.wp-socializer.wpsr-buttons.wpsr-row-1");
var sticky = header.offsetTop;

喜欢

function myFunction() {
var header = document.querySelector("div.wp-socializer.wpsr-buttons.wpsr-row-1");
var sticky = header.offsetTop;
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}