What you need to know about scroll-then-fix

May 13 · 4 min read
Photo by Kevin Bhagat on Unsplash

Scroll-then-fix is a simple feature that can be added to your website that does as the name suggests; after scrolling, something becomes fixed. Typically, the element starts off elsewhere on the page and then once it reaches a specific threshold from scrolling, it fixes to the page — and unfixes in the opposite direction. The most common use of this feature is when site navigations become fixed to the top of the page as the user continues reading down into the site content. You might be thinking, ‘how is this different from a fixed header that is permanently at the top of the page?’ Scroll-then-fix means that either the designer or the site creator has the ability to have the soon-to-be-fixed element start off anywhere on the page. You aren’t limited to that same old banner that starts and ends at the top of the header.

You may be asking why you would need to consider adding something like this into your site. First off, having an element on your page that becomes fixed can greatly benefit the user experience. The ever-so-common fixed navigation bar could include links to your social media accounts, a search feature, log in or sign up buttons, or links to navigate to different sections or pages on your site. Regardless of what you decide to include in your scroll-then-fix navigation bar, the ease of accessing it while deep into the site’s content makes for a more pleasant and productive experience for the user. Another reason why you may want to include this feature in your site is if your page has a lot of sections. You could have your section headings become fixed to the top of the page as the user scrolls through to remind them of which section they are in, with the heading names changing as they go through each section.

To implement scroll-then-fix into your site, the element in question will need to be able to toggle to and from the ‘position: absolute’ and ‘position: fixed’ states (which you can target with jQuery). In my version, the site navigation bar starts at the bottom of the page, in an absolute position. I wouldn’t normally put a height limitation on this type of element but for the scroll-then-fix effect to work in a flawless way, the height needs to be evident.

The next step is to come up with a class that will target the element through jQuery. I gave this a fixed position state with a location at the top of the page. I matched the height of the nav and gave a z-index of 1 to ensure it always stayed on top of the rest of the site content.

The final step is to use jQuery to target the scroll function of the page and add or remove the class of fixed when the nav height reaches 70px.

The end result is a seamless transition between the absolute and fixed states and a rather simple way to spice up your site.

There are a few concerns once the desired element becomes fixed — the biggest being compatibility on mobile screen sizes. If the fixed element’s height is too large, it may occupy valuable real estate and defeat the purpose of making things easier for the user. It is important to remember to not only include scroll-then-fix because it adds some extra zing to your page — you really want to be sure it adds value and improves site accessibility for all.

Idea conceptualized from Bram de Haan — https://codepen.io/atelierbram/pen/dMEadR?editors=0010

Christina Greene

Written by

A gluten-free Front-End Developer who likes to travel and bake cupcakes (I promise they don’t taste like cardboard). | HackerYou Cohort 22

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade