Cannot read property 'offsetTop' of null (sticky navbar)

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

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

Your code can't find the element with an attribute `id="navbar"`, so the variable `navbar` is `null` — Get Off My Lawn, Mar 08 '19 at 20:46
You need to execute that code after the html has been generated. — Get Off My Lawn, Mar 08 '19 at 20:50
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Get Off My Lawn, Mar 08 '19 at 20:54

score 4 · Accepted Answer · answered Mar 08 '19 at 20:50

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.

score 0 · Answer 2 · answered Mar 08 '19 at 20:50

0

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>

answered Mar 08 '19 at 20:50

SaromChars

1
1

@Mark Exist another same id element?? – SaromChars Mar 08 '19 at 20:58
@SaromChars that wouldn't matter, It would just return the first found id – Get Off My Lawn Mar 08 '19 at 21:15

Cannot read property 'offsetTop' of null (sticky navbar)

2 Answers2

Besause your demo has not a element named 'navbar'