javascript - Uncaught TypeError: Cannot read property 'offsetTop' of null

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

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

Share Improve this question asked Sep 27, 2018 at 8:22 Dpka 2461 gold badge3 silver badges15 bronze badges

2 Where is you script included in the page? – connexo Commented Sep 27, 2018 at 8:25
@connexo In the <head> section at the end, after css link. – Dpka Commented Sep 27, 2018 at 8:26
Then you need to wrap code that wants to access the DOM in an event listener that listens on DOMContentLoaded. – connexo Commented Sep 27, 2018 at 8:28
@connexo can you please explain what you said? I am new to this. – Dpka Commented Sep 27, 2018 at 8:29
It also helps putting 2 slashes in front of "Remove "sticky" when you leave the scroll position" – Gerard Commented Sep 27, 2018 at 8:34

| Show 3 more ments

2 Answers 2

Sorted by: Reset to default 9

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Uncaught TypeError: Cannot read property 'offsetTop' of null - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)