be_a_man

array.splice(-1, 1)
arr.length = arr.length - 1

))
arr.filter((el, i) => i !== arr.length - 1)

Заменить на стрелочную функцию, чтобы сохранить контекст this.
А в целом там такая лапша, что нужно все удалить и написать нормально

edit.addEventListener('keypress', (event) => {
    if (event.key == 'Enter') {
        this.innerHTML = edit.value
    }
});

Так

Например, так
Или так

По теме: бомж вариант - чистый WP, не переделывать готовую тему, а ставить вп и создавать тему с нуля, будет вам page speed 95. Плавные переходы можно без фреймворков. Например barba.js - библиотека. Анимации - gsap.

Нормальный вариант: vue/react, node.js/laravel/django

history.pushState(null, null, location.href);
window.onpopstate = function () {
    history.go(1);
    alert('Close')
};

Сам спросил - сам ответил(. https://codesandbox.io/s/vue-template-d6nw5

https://jsfiddle.net/j0qs6oL4/

Конечно юзать GSAP. Основная фича это TimeLine. Т.е. поддержка вашего кода в дальнейшем будет намного проще.
Например вам нужно выполнить последовательно 2 анимации.

Без GSAP:
Вручную ставите задержки, например, первая анимация длится 3 секунды, для второй вам нужно ручками прописать «начать анимацию спустя 3 секунды». Если время первой анимации изменилось, снова переписывать все delay. Представьте если у вас одна анимация состоит из 10 микроанимаций и на сайте несколько анимаций. В случае изменения чего-либо все тайминги считать заново и переписывать. А если по завершению анимации еще нужно что-то сделать, то это полный трешачёк.

GSAP
Вы просто говорите GSAP'у когда закончится первая анимация, начни вторую. Или начни вторую на пол-секунды раньше чем завершится первая. А когда анимация завершится полностью, открой мне попап, например.

Что касается изучения JS, в процессе работы и выучите, просто практикуйтесь как можно больше, а не думайте что же юзать. Берите GSAP и покоряйте.

На днях делал похожее. Вам только нужно адаптировать для своих задач

Гуглите event.target

UPD: Готовый вариант на JQuery

В общем разобрался. Решение

Благодарности:
1. Ernest Faizullin за наводку.
2. Сергей Соколов за наводку и заметку о производительности

Поскольку выяснилось, что для каждого элемента селектора надо вызывать ф-ю один раз, а не всего один раз глобально, понадобится книга учёта, где элементы будут отмечаться: выполнил / не выполнил ещё пока.

Не факт, что нужно на каждый кадр отрисовки заново искать в DOM элементы по селектору - это медленно.

Зачем вообще это нужно было? Чтобы было универсальное решение для работы с элементами, когда они попадают в зону видимости.

1. Непонятно зачем скриптами фиксить панель, когда это делается c помощью CSS.
position: fixed на панель,
а на body padding-top: 125px

2.

$('.menu ul li a').click(function(){
	var el = $(this).attr('href');
	$('html,body').animate({
		scrollTop: $(el).offset().top - $("header").height()}, 1000);
	return false;
});