JS30 Challenge Day 24 - Sticky Nav

Github Link

I had implemented a scroll to fix nav for fun already before this lesson. But this lesson surely refined it by using window.scrollY, offsetTop, offsetHeight instead of just scrollTop.

scrollY is an integer value of how much from the top the window has been scrolled

offsetTop gives the distance of the top of the element from the top of the webpage.

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.

position:fixed does not take up space like normal.

so when you scroll towards top, the nav jerks out, and jumps exposing some blank space at the top.

We can fix this by giving padding-top to body.

The amount of padding should be nav.offsetHeight

We need to add + ‘px’ to the variable to make it work.