Дуболом Одноклеточный

$(window).on("scroll", function(){
  $(".header").toggleClass("header--scroll", $(this).scrollTop() > 0);
});

Работает безотказно

Вообщем, нашел ответ, у меня все из хука useAuth передавалось в контекст реакта, но в AuthPage (странице авторизации) у меня использовался напрямую useAuth хук, а не функции из контекста...

Если проще говорить, то в AuthPage, я заменил это:
const {login} = useAuth();
На это:
const {login} = useContext(AuthContext);

$("p:last-child");
или
$("p").last();

$(window).on("scroll", function() {
  $(селектор header).toggleClass("active", $(this).scrollTop() > $(window).height());
});

Тут, шапка будет меняться, если пользователь прокрутил больше чем на 100vh ($(window).height() - это 100vh)

Изменено: Только класс active ты должен написать в css (написать какие стили header будут изменяться)

Может быть это из-за localhost? Иногда javascript на localhost блокируется

Сам нашел ответ, я забыл надо num записывать до click event'a:

-------------------------------------------------
Ответ, который сработал для меня:

ИЗМЕНЕНО (оставляю памятку, для тех кто тоже столкнулся с такое проблемой):
Я нашел ответ, все не работало из-за __dirname, из-за webpack, он выдавал мне просто / :

console.log(__dirname); // выдавал мне /  (  / - это символ слеш если что)

Нужно было в webpack.conf.js написать:

node: {
  __dirname: true
}

Вообще, лучше (если вы используете nodeJS) поставить свойство global: true (а также __filename): - оно сделает все функции nodejs валидными, или другими словами, не будет мешать nodejs делать свою работу:

node: {
  global: true,
  __dirname: true,
  __filename: true
}

Подробнее о node свойстве в webpack.conf.js тут: https://webpack.js.org/configuration/node/
После чего, я попробовал вывести __dirname:

console.log(__dirname); // выдает src/assets/js/app.js

Вот работающий readFileSync:

let fileData = fs.readFileSync(__dirname + "/text.txt").toString();
console.log(fileData); // выдает: "Привет, soso!"

В общем, сам fs работал, в writeFile, я просто не указал во 2-ом параметре коллбэк обработки ошибки (или 3-ем если вы передаете дополнительный параметр "utf-8") err => if(err) console.log(err);
Пример:

const fs = require("fs");

fs.writeFile("/text2.txt", "Привет", err => { if(err) console.log(err) });
// или
const fs = require("fs");

fs.writeFile("/text2.txt", "Привет", "utf-8", err => { if(err) console.log(err) });

Подробнее (а также это место где я нашел информацию о том, что webpack блокирует __dirname):
https://github.com/webpack/webpack/issues/1599

ElectronJS, c ним можно создать desktop приложение на HTML CSS и JS а также он как раз с node работает отлично, просто в параметры окна electron, напиши:

transparent: true, // прозрачность окна
show: false // скрытие ярлыка программы с панели задач

Если будешь использовать nodejs в непосредственно основном js файле (script.js, app.js, main.js, index.js), не забудь рассказать об этом electron'у:

webPreferences: {
  nodeIntegration: true
}

А потом выхватывай key ( название клавиши, на которую нажал пользователь):

document.addEventListener("keydown", e => { 
  if(e.key == "C"){
    console.log("нажал на C");
  }
}); // также есть еще keypress и keyup

GreenSock - платформа для анимаций
ScrollMagic - библиотека, которая делает эти анимации при скроллинге

При нажатии на элемент берешь его индекс, и задаешь css элементу div по индексу (с помощью метода eq в jquery)
Мне кажется этот пример тебе поможет:

Асинхрон.

await $("#main-heading").fadeOut(1000); // ждешь пока эта строка выполнится
$("#main-heading").show();