Problem z getElementById

Question

Witam mam w pliku .html zapis

<div id="nav-bar" class="nav-bar">
</div>

a w jsie złapałem ten element w ten sposób

let NavBar = document.getElementById('nav-bar');
let NavBarPosition = NavBar.offsetTop;

Jednak w konsoli wyskakuje mi taki błąd

Jest to bardzo prosty zapis więc zastanawiam się gdzie popełniłem błąd.

EDIT. Plik był podpięty w sekcji head, potem przeniosłem to podpięcie na sam początek sekcji body, gdzie też występował ten błąd. Natomiast jak podpiąłem go na samym końcu sekcji body to wszystko zaczęło działać. Nie rozumiem dlaczego tak się stało.

Answer 1

Tu jest odpowiedź wyjaśniająca zachowanie się silnika js-a, w zależności, gdzie "znajduje" się kod js-a (w kodzie html)

JavaScript Execution Order

The Location of JavaScript on Your Web Page (Determining What JavaScript Will Run When)

Since the JavaScript on your page executes based on certain factors, let's consider where and how to add JavaScript to a web page. 

There are basically three locations into which we can attach JavaScript:

• Directly into the head of the page
• Directly into the body of the page
• From an event handler/listener

można temu np.: zaradzić poprzez umieszczenie kodu js-a w:
DOMContentLoaded, load, beforeunload, unload
How to wait for the DOM ready event in plain JavaScript

Answer 2

I działa bez problemu. Zapewne wykonujesz skrypt w miejscu, w którym strona jeszcze nie wczytała rzeczonego diva.