Okay, so today I wanted to mess around with something called “sticky numbers.” I’d seen a few examples online, and it looked like a fun little project to try out. Basically, the idea is that you have a number that visually “sticks” to the top of the screen as you scroll down a page, and then “unsticks” when you scroll back up past its original position.
First, I needed a basic HTML structure. I created a simple page with a bunch of paragraphs to give it some length so I would have enough content to require scrolling. Then, I added a div element with a number inside – that’s the number I wanted to make sticky.
Then came to the styling part. I added a little CSS. I defined the styles for my number’s container, most importantly is the position: sticky
After I set up the basic styling, I started playing around with how I want it to stick. The key here is the Javascript. I need some javascript to make it work, and I was trying out with an easy method. I added an event listener for scrolling. Inside the event listener, I added an if-else condition to add or remove “sticky” class depending on the page’s vertical scroll position.
I kept refreshing the page and scrolling, making little tweaks to the top and offset values until it felt just right. It was a bit of trial and error to get the positioning just how I wanted it, but it was satisfying to see it come together.
Here’s the final set of the HTML, CSS, and Javascript I am using:
HTML part, the number is in the div tag, and there is a bunch of text.
<div class="sticky-number">123</div>
<p>...lots of text here...</p>
CSS Part, add style for the number container.
.sticky-number {
position: -webkit-sticky; / For Safari /
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
text-align: center;
font-size: 24px;
Javascript.
*('scroll', function() {
const stickyNumber = *('.sticky-number');
const originalOffset = *;
if (* >= originalOffset) {
* = "fixed";
} else {
* = "sticky";
So, this is a brief explanation of sticky numbers and how I built it, I hope you can build it on your own now.
