Uncaught TypeError: Cannot read property 'offsetTop' of null

Question

I am using HTML, CSS and JavaScript to create a web page with a sticky and responsive navigation bar. I created the responsive navigation bar and am trying to make it sticky

Answer 1

Code that wants to access the DOM needs to be wrapped in an event listener that listens on DOMContentLoaded.

Currently you are trying to access the element with the id myTopnav when the browser hasn't parsed the HTML yet, which means your document.getElementById("myTopnav"); returns null. In the next line of code you are trying to read the offsetTop property of the null that your document.getElementById("myTopnav") returned, resulting in Cannot read property 'offsetTop' of null.

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
  // When the event DOMContentLoaded occurs, it is safe to access the DOM

  // When the user scrolls the page, execute myFunction 
  window.addEventListener('scroll', myFunctionForSticky);

  // Get the navbar
  var navbar = document.getElementById("myTopnav");

  // Get the offset position of the navbar
  var sticky = navbar.offsetTop;

  // Add the sticky class to the navbar when you reach its scroll position. 
  // Remove "sticky" when you leave the scroll position

  function myFunctionForSticky() {
    if (window.pageYOffset >= sticky) {
      console.log("window.pageYOffset >= sticky");
    } else {
      console.log("Not window.pageYOffset >= sticky");
    }
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky");
    } else {
      navbar.classList.remove("sticky");
    }
  }

  /*Toggle between adding and removing the "responsive" class to topnav
  when the user clicks on the icon*/

  function myFunctionForResponsive() {
    navbar.classList.toggle('responsive');
  }
})

Answer 2

some DOM element don't have this 'offsetTop' property check the existence before use. elements have this property