Want to learn how to make anything sticky in Oxygen?

In this tutorial I'm going to show you:

  • How to make something sticky by adding a single class to it
  • How to use modifier classes to adjust the stickiness
  • How sticky elements work from a structural standpoint
  • The #1 thing that confuses people about sticky behavior

After this tutorial you'll be a master of stickiness in Oxygen 🙂

*** JOIN THE INNER CIRCLE ***

Want access to deep-dive Oxygen tutorials and agency trainings at a no-brainer price? Check out https://digitalambition.co/inner-circle/

*** GET THE FREE STICKY UTILITY CLASSES ***

Copy and paste these utility classes into an Oxygen stylesheet. Once you've used them once on an element they'll start to show up in the recommended classes panel.

/* STICKY UTILITY CLASSES */

.sticky {
	position: sticky;
	top: 0;
}

@media (max-width: 479px) {
	.sticky-off--s {
		position: static;
	}
}

@media (max-width: 767px) {
	.sticky-off--m {
		position: static;
	}
}

@media (max-width: 991px) {
	.sticky-off--l {
		position: static;
	}
}

.sticky-top--s {
	top: 2.5%;
}

.sticky-top--m {
	top: 5%;
}

.sticky-top--l {
	top: 10%;
}

The main ".sticky" class needs to be applied to any element that you want to be sticky. After that you can add the modifier classes. For example, if you need a bigger gap between the sticky element and the top of the browser window you can add the ".sticky-top--m" class for a 5% gap.

The "off--" classes will turn sticky off at their respective breakpoints. This typically isn't needed but there's a small number of use cases where you might need to do this.

Note: If you structure the page incorrectly, sticky either won't work or will have undesirable effects. Make sure you watch the part of the tutorial where I talk about page structure.