Может ли кто-нибудь буквально перевести эту функцию JavaScript в простой для понимания способ?

Question

https://codepen.io/zchee/pen/ogzvZZ

Приведенная выше ссылка на кодовый блок содержит пример анимации прокрутки, которая изменяет поведение и внешний вид навигации при прокрутке вниз, что делается с помощью чистого ванильного JavaScript.Проблема в том, что я не понимаю, как работает этот скрипт.У меня есть базовые знания в JavaScript, и до сих пор я знаю, что ...

1. Есть 3 varaibles - раздел (который выбирает классы "section"), пустые объекты {}и i, значение которого внутри функции равно 0.

2. После проведения исследования я обнаружил, что Array.prototype.forEach.call - это то же самоеas [] .forEach (function ()) .Насколько я понимаю, е является параметром.Отсюда я теряюсь, так как не знаю смысла section [e.id] = e.offsetTop;

3. Хорошо, я понимаю окно.onscroll = function () {} но не на 100% уверены, почему нам нужно создать переменную для scrollPosition, равную scrollTop или body.scrollTop?

И я потерян для остальных кодов ... Я ценю построчную интерпретацию.Спасибо.

(function() {
  'use strict';

  var section = document.querySelectorAll(".section");
  var sections = {};
  var i = 0;

  Array.prototype.forEach.call(section, function(e) {
    sections[e.id] = e.offsetTop;
  });

  window.onscroll = function() {
    var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

    for (i in sections) {
      if (sections[i] <= scrollPosition) {
        document.querySelector('.active').setAttribute('class', ' ');
        document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
      }
    }
  };
})();

Answer 1

Поскольку другие люди уже дали вам объяснение, я просто попытаюсь переписать его, чтобы оно было как-то более читабельным?

{
  let sectionNodes = document.getElementsByClassName("section"),
      sectionTopPositions = {}
      
  for (let node of sectionNodes) {
    sectionTopPositions[node.id] = node.offsetTop
  }
  
  function onWindowScroll() {
    let scrollPosition = document.documentElement.scrollTop
      || document.body.scrollTop
    
    for (let [nid, topPos] of sectionTopPositions) {
      if (topPos <= scrollPosition) {
        let activeNodes = document.getElementsByClassName("active"),
            linkNodes = document.querySelector(`a[href*=${nid}]`)
        
        activeNodes.className = ""
        linkNodes.className = "active"
      }
    }
  }
  
  window.addEventListener("scroll", onWindowScroll)
}

Answer 2

Итак, если вы посмотрите на функцию, вы увидите, что это выражение немедленного вызова функции (IIFE) , которое просто означает, что это функция, которая выполняется, как только она встречается.Когда функция запускается, она делает следующее:

var section = document.querySelectorAll(".section");

Находит все узлы, которые имеют класс section.Это возвращает NodeList.Это будет представлять <div id="home" class="section"></div> и т. Д.

Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});

Это способ перебора списка, обладающего такими свойствами, как массив.Если бы это был массив, forEach был бы вызван к нему напрямую (согласно @RobG ниже).Это сохранит атрибут id каждого section в объекте sections, который используется как поиск со значением верхнего смещения, т. Е. Как далеко от вершины находится каждый раздел, когда он отображается.

window.onscroll = function() {}

Обработчик событий, который будет срабатывать при каждой прокрутке.

var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

Как далеко от вершины вы прокрутили до сих пор.

if (sections[i] <= scrollPosition) {
    document.querySelector('.active').setAttribute('class', ' ');
    document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
  }

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