const - JS | lectureAdvanced DOM and Events

In this lecture we will implement another pretty common feature on webpages, which is that the navigation bar becomes attached to the top of the page after we have scrolled to a certain point. This is called a sticky navigation. Below is a video of the final result of this lecture.

Before we start, head on over to the starter files and download them. Then, open the index.html file in your browser., and let's get started.

The navigation is made sticky by adding a class called sticky to the nav element when we reach a certain position. All this class does is set the position of the nav element to fixed, and it sets a background color to the nav element. We will implement this feature in this lecture using the scroll event. And in the next lecture, I will show a better way of doing this.

The scroll event is available on the window object. It is fired each time a user scrolls the page.

window.addEventListener('scroll', function (e) {
  console.log(e);
});

If you tried it, you have certainly noticed that if fires (too much) each time you scroll the page. So, the scroll event is not really efficient and usually should be avoided. But, for this lecture, we will use it.

Let's start by getting our current scroll position.

window.addEventListener('scroll', function () {
  console.log(window.scrollY); // ==> This is the position in the current viewport!});

Next we said earlier that to make the navigation sticky we need to add the class sticky to the nav element when we reach a certain position. So, the question is when exactly should the navigation become sticky? Well, let's say we want the navigation to become sticky as soon as we have reached the first section. So let's first select the first section, and then get its coordinates.

const firstSection = document.querySelector('#section--1');
const firstSectionCoords = firstSection.getBoundingClientRect();
window.addEventListener('scroll', function () {
  // Do something
});

Let's now use these coordinates to determine when the navigation should become sticky.

const nav = document.querySelector('.nav');
const firstSection = document.querySelector('#section--1');
const firstSectionCoords = firstSection.getBoundingClientRect();

window.addEventListener('scroll', function () {
  if (window.scrollY > firstSectionCoords.top) {    nav.classList.add('sticky');  } else {    nav.classList.remove('sticky');  }});

Everything now works as expected. But as I mentionned earlier, this is pretty bad for performance. So, using the scrollevent to perform an action at a certain scroll position is really not the way to go. And again, that's because the scroll event fires all the time no matter how much the change is. And that results to a pretty bad performance, and most especially on mobile devices. So the next lecture, I will show you a better, and way more efficient way of doing this using the IntersectionObserver API.