Александр

Функции
Стрелочные функции не имеют своих this и arguments, при обращении получают их из окружающего контекста.

img {
   display: block;
   margin: 0;
   padding: 0
}

Как вариант задать

img { 
    display: block;
    margin: 0;
    padding: 0;
}

Потому что переменная box это html-коллекция, а не конкретный див по котором вы кликаете. Чтоб менять свойство у конкретного элемента нужно использовать например цикл.

var box = document.getElementsByTagName("DIV");

for( var i = 0; i < box.length; i++) {
  box[i].addEventListener('click', function() {
    if(!this.style.backgroundColor) {
      this.style.backgroundColor = 'red';
    } else {
      this.style.backgroundColor = '';
    }
  })
}

https://jsfiddle.net/1e6u875v/

Так ?
https://jsfiddle.net/fdq1wnwh/2/

Изучайте (полностью весь раздел):
https://learn.javascript.ru/closures-usage
В конце разобрана задача которая вам нужна

Используйте background-attachment: fixed:
https://jsfiddle.net/37b7Lqhu/2/

Ну например вот так, не стал делать через переменные чтоб получилось короче, но суть думаю ясна:

document.getElementById('form').addEventListener('submit', function(e){
  e.preventDefault();
  // Показываем блок с заранее сделанной анимацие загрузки
  document.getElementById('loading').style.display = 'block';
  // Через 2 секунды запускаем функцию в которой скрываем блок с анимацией
  // и показываем нужный текст
  setTimeout(showText, 2000);
});

Ну например так:
https://jsfiddle.net/u1n56dvu/
По поводу вашего кода, особо не смотрел, но id используется только для уникальных блоков. Замените id на class.

Все можно решить c помощью padding:
https://jsfiddle.net/r5hkjeLs/