Правильная ли реализация?(код работает)

213

28 марта 2018, 07:33

Есть код. Подскажите верна ли реализация?

Суть такая - есть шапка сайта которая имеет два класса с разными css стилями. При скроллинге вниз она меняет свои стили, а если поднять в начало страницы то получает исходные значения.

Вопрос такой: правильно ли реализован код (код работает)? Просто хочу узнать мнение.

window.onscroll = function() {
  document.querySelector('#header');
  var el = document.documentElement.scrollTop;
  if (el > 1) {
    document.querySelector('#header').classList.add("sticky");
  } else {
    document.querySelector('#header').classList.remove("sticky");
  }
};

Answer 1

window.onscroll = function() {

Лучше подписываться через addEventListener.

Ещё нет проверки, какой именно элемент прокручивается. В данном случае это некритично, но потенциально может вызывать лишние перерессчёты и влиять на производительность.

document.querySelector('#header');

Бесполезный код.

var el = document.documentElement.scrollTop;

Называть число (позицию скролла) элементом не следует.

if (el > 1) {

0px и 1px считаются непрокрученными, а всё остальное - прокрученным?

Если это действительно то, что требуется, то я бы записал >=2 (с учётом того, что исло всегда целое), потому что иначе без комментария неясно, ошибка это, или так задумано.