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.
Let’s take a look at the code:
The first three lines of code define the
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
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.