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

What's wrong with this? I found a w3school example of sticky navigation. In the console it displays:

Uncaught TypeError: Cannot read property 'offsetTop' of null

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

What's wrong with this? I found a w3school example of sticky navigation. In the console it displays:

Uncaught TypeError: Cannot read property 'offsetTop' of null

• javascript
• html
• navbar

• Your code can't find the element with an attribute id="navbar", so the variable navbar is null – Get Off My Lawn Commented Mar 8, 2019 at 20:46
• Sorry, wrong code, check again ! – Mark Commented Mar 8, 2019 at 20:48
• How to fix it, example please! – Mark Commented Mar 8, 2019 at 20:49
• You need to execute that code after the html has been generated. – Get Off My Lawn Commented Mar 8, 2019 at 20:50
• Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? – Get Off My Lawn Commented Mar 8, 2019 at 20:54

2 Answers 2

It looks like it can't find any element with the id "navbar".

This could be caused by not having an element with the id "navbar".

Alternatively, if you do have an element called "navbar", this code is likely running before the page has finished loading. The easiest way to fix this is to put the javascript at the bottom of your page. Alternatively, you can use jQuery's $(document).ready, or one of the vanilla alternatives from this question.

Besause your demo has not a element named 'navbar'

You should create a tag like this div in your HTML code

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