Uncaught TypeError: Cannot read property 'offsetTop' of null

Asked 27/9, 2018 at 8:22 Answered 26/11, 2019 at 10:22

Solved javascript css html navigationbar

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 as well. The issue is that it's not sticky and shows error: Uncaught TypeError: Cannot read property 'offsetTop' of null

HTML code:

<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#career">Careers</a>
<a href="#fellowship">About Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunctionForResponsive()">
    <i class="fas fa-bars"></i>
</a>
</div>

JavaScript code:

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {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() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

If I am taking class instead of id then it's showing the error: Uncaught TypeError: Cannot read property 'remove' of undefined

Ilysa answered 27/9, 2018 at 8:22 Comment(8)

Where is you script included in the page? – Rheumy 27/9, 2018 at 8:25

@Rheumy In the <head> section at the end, after css link. – Ilysa 27/9, 2018 at 8:26

Then you need to wrap code that wants to access the DOM in an event listener that listens on DOMContentLoaded. – Rheumy 27/9, 2018 at 8:28

@Rheumy can you please explain what you said? I am new to this. – Ilysa 27/9, 2018 at 8:29

It also helps putting 2 slashes in front of "Remove "sticky" when you leave the scroll position" – Unpredictable 27/9, 2018 at 8:34

Added an explanation to my answer below. – Rheumy 27/9, 2018 at 8:39

Let me know if anything is unclear. I'll try to help best I can. – Rheumy 27/9, 2018 at 8:53

@Rheumy Hey I have added my issues under your answer. – Ilysa 27/9, 2018 at 9:13

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');
  }
})

Rheumy answered 27/9, 2018 at 8:32 Comment(3)

Hey it worked but 2 issues: 1. myFunctionForResponsive() isn't working, I tried to put previous code in this function but still pressing the icon does nothing. 2. I have created my web page in parallax form, so when the background image changes the navigation bar turns grey i.e. it's inaccessible, it's happening on every background image. – Ilysa 27/9, 2018 at 9:12

I fixed issue no.2 with z-index but what to do for responsiveness? – Ilysa 27/9, 2018 at 10:12

That's a completely different question. The one you've asked should be answered, right? – Rheumy 27/9, 2018 at 12:39

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

Anisometropia answered 26/11, 2019 at 10:22 Comment(0)

Recommended topics

Hot tags