As a WordPress Developer, a sticky navigation bar is an often requested feature. A sticky navigation bar is a navigation bar that remains at the top of the screen even when the user scrolls down the page. It allows users to navigate to different sections of the website without having to scroll back up to the top. In this tutorial, we will learn how to create a sticky navigation bar using an Intersection Observer. The reason were using an intersection observer and not just making the site-header position:fixed, is because the header is going to kick in only after the defined viewport.
Intersection Observer is a JavaScript API that allows you to observe changes in the intersection of an element with another element or the viewport. By using the Intersection Observer API, we can detect when an element comes into view and when it goes out of view. In our case, we want to detect when our header element intersects with the viewport and toggle a class on our navigation bar element to make it sticky. This is a useful feature to have on projects and a common request in WordPress development.
Let’s take a look at the code:
The first three lines of code define the stickyNav, header, and navHeight variables. stickyNav and header are used to select the elements we want to observe, and navHeight is used to set the rootMargin option for the Intersection Observer. The rootMargin option defines a margin around the viewport that is used to trigger the intersection observer when the observed element is within this margin.
Next, we define the obsCallback function. This function is called every time the observed element intersects with another element or the viewport. The entries parameter contains an array of intersection observer entries, which we can use to check if the observed element is intersecting or not. In our case, we only have one observed element, so we can use the first element in the entries array to check if it’s intersecting or not. If the observed element is not intersecting, we add the .sticky-nav class to our stickyNav element, which makes it sticky. If the observed element is intersecting, we remove the .sticky-nav class from our stickyNav element, which makes it non-sticky.
After defining the obsCallback function, we define the obsOption object. This object is used to set the options for the Intersection Observer. The root option defines the element that is used as the viewport. In our case, we want to use the entire viewport, so we set it to null. The threshold option defines the percentage of the observed element that needs to be visible before the intersection observer is triggered. In our case, we want to trigger the intersection observer as soon as the observed element enters the viewport, so we set it to 0. Finally, the rootMargin option defines the margin around the viewport that we want to use. We set it to -navHeight, which makes the intersection observer trigger when the observed element is navHeight pixels away from the top of the Navbar.
Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart. Have a project in mind? Contact me here.