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

Question

I tried to stick the social share bar of my website on scroll according to the tutorial here .

Link to my website: https://www.staging5.howtostudycantonese.com/how-to-say-crazy-in-cantonese/

I made some modification to the code, and somehow it doesn't work. I have tested everything with the inspector and I found out the class of the element of social share bar does not change when I scrolled past it. I believe classList.add is the problem there. I am not sure why it is not working.

The code I am using:

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

You are setting the variables before the elements are loaded, that's why they are null.

use onload function to avoid this:

var header; 
var sticky;

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

Answer 2

You have to below lines in myFunction

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

like

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");
  }
}