How to Create Fixed Positioning with CSS and JS On Scroll

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.

Take the Solodev homepage for example. We have some lovely boxes that appear below the main hero image. These boxes provide quick access to popular pages. As you scroll down the page, you will see that similar boxes will pull from the left side of the screen. It may shock some to find that these two component are dictated by the same underyling HTML. With some crafty JavaScript and CSS, we can change how the element is displayed depending on the user's view and scroll position.

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: 

HTML

The general HTML markup for the given section can be found below:<section id="home-boxes"> <div class="home-boxes text-white space-gray " data-sub-nav-status="toggle"> <div class="container"> <div class="row"> <div class="w-25 text-center box box1"><i class="abs fa fa-rocket" aria-hidden="true"></i> <h5>Create<span class="hide-text"> Your Website</span></h5> </div> <div class="w-25 text-center box box2"><i class="abs fa fa-cloud" aria-hidden="true"></i> <h5><span class="hide-text">Secure Cloud </span>Host<span class="hide-text">ing</span></h5> </div> <div class="w-25 text-center box box3"><i class="abs fa fa-user" aria-hidden="true"></i> <h5>Engage<span class="hide-text"> Your Audience</span></h5> </div> <div class="w-25 text-center box box4"><i class="abs fa fa-cogs" aria-hidden="true"></i> <h5><span class="hide-text">We Can </span>Help</h5> </div> </div> </div> </div> </section>

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.

CSS

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.

JavaScript

The real magic to all of this can be found in the JavaScript:

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.