Невозможно прочитать свойство 'offsetTop' из null (липкая панель навигации)

Question

JS CODE:

window.onscroll = function() {myFunction();};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

Что с этим не так? Я нашел пример вязкой навигации в w3school. В консоли отображается:

Uncaught TypeError: Невозможно прочитать свойство 'offsetTop' с нулевым значением

Answer 1

Похоже, он не может найти элемент с идентификатором "navbar".

Это может быть вызвано отсутствием элемента с идентификатором "navbar".

В качестве альтернативы, если у вас есть элемент с именем "navbar", этот код, вероятно, будет запущен до завершения загрузки страницы. Самый простой способ это исправить - поместить javascript внизу вашей страницы. Кроме того, вы можете использовать jQuery $(document).ready или одну из ванильных альтернатив из этого вопроса .

Answer 2

Потому что в вашем демо нет элемента с именем 'navbar'

Вы должны создать тег как этот div в вашем HTML-коде

 <div id='navbar'></div>