Back to All Events

Building a Scroll Indicator

5 Lessons | 10 minutes

Building a Scroll Indicator

In this short series, you’ll learn how to create a scroll indicator animation your blog posts. You’ll have the choice to place it at the top of the page, bottom of the page, or bottom of a sticky navigation.

This is a great intro project into scroll-based animations for beginner javascript learners.

 
 
Featured
Project Overview

An overview of what we’ll be building in this series.

Basic Setup

Add the core CSS that you need to get started.

Scroll Events

Learn to run a function as your scroll that gets the scroll position on the page.

Calculating the scroll percent

Learn a key sticking point in getting the scroll percent and how to overcome it.

Putting it all together

Make the scroll indicator only work on blog pages and learn the tweak to position it at the bottom of the header.

Previous
June 26

Main Nav Icons
Next
February 29

Cycling Site Subtitles