How to Create Fixed Positioning with CSS and JS On Scroll
Navigation tools are some of your most helpful when it comes to improving UX/UI. Here's one more unique nav tool -- fixed positioning of a nav bar while a user scrolls.
In a number of development projects, you will want to create some variety of fixed position elements that follow the user as they scroll down the page. This type of design opens up a variety of UI/UX possibilities. It gives additional navigational options for your users to crafting attractive call-to-actions that can spur user engagement. While it's recommended to limit the use of fixed elements, their strategic use can have wide-ranging positive effects including increased conversions, decreased bounce rates, and better content engagement.
With most fixed position elements, however, the case is largely the same: the way an element appears on load is how it generally will appear as a user scrolls. Because of this general approach, some fixed elements become unfeasible with respective to their overall design. That being said, there's no rule that says you can't show a given element in different ways as the user scrolls.
Quick note: This tutorial is optimized for desktop users. Mobile fans, try giving this a look on your laptop or desktop computer for the full experience.
Here’s the HTML, CSS, and JS needed to create something similar:
The general HTML markup for the given section can be found below:
The important component here are the main ID "#home-boxes" and the subsequent class "home-boxes". We will target these elements with JS so as to add additional classes depending on the scroll position of a given user. Through the use of the generic "box" and the specific "box1" classes, you can customize the individual boxes to be unique.
The real meat of the CSS can be found below:
As you can see, the class "home-boxes-left" is fixed. This is what will appear on the left-side of the screen for users as they scroll. We will append this class using some nifty JS that calculates the scroll of a user. We also include some transition affects so the fixed position can "slide" in from the left, rather than simply abruptly showing.
There are a few things of note here. First, though the "threshold" variable, we're essentially saying that the fixed position element should not slide out until the user has scrolled past a certain point. This will prevent the fixed position element, and its non fixed alternative, from showing at the same time. We then go on to say that if the user has scrolled past this threshold point, then add the class "home-boxes-left". If the user scrolls back to within the threshold point, then remove the class "home-boxes-left".
And there you have it. All of the above code and styling will come together to created a truly unique fixed position element. This approach also gives you created flexibility in how you present such elements dependinng on whatever conditions you define. Take a look below at the working code sample and see how everything interacts with one another.