All about Sticky Navs & what happens to them on devices

Although navigations stuck to the top of browser windows are sometimes scrutinized, their relevance on webpages cannot easily be overlooked. Recently, I was challenged to make some sticky items that were fairly complex so I decided to write a plugin that would work for me & my use cases called Sticky Bits.

*position: fixed is a css rule for sticky navigation which positions html elements at a fixed point on the page.

Sticky Navigation in my purview became more relevant with an implementation of scrollspy by bootstrap years ago. It seemed that providing users with visual queues became expected by users or by companies to provide location & extra navigation to users on webpages. Triggers that set a navigation's position to stick & change vary throughout many web experiences so I'm only going to focus on a few things that I've seen.

Browser sticky navigation

Sticky navigation: This is when a navigation is sticky to the top of a webpage from the start. This is typically done when setting an element to position: fixed & then either setting adding a margin-top to the next sibling element that is equal to the height of the fixed navigation or adding an element that wraps the sticky nav & then has a height that is set to the height of the fixed navigation.

Static then fixed navigation: This is when a navigation appears to be static & then a when a customer scrolls to where the top of the browser window meets the top of the sticky element - the element appears to snap to the top of the browser window. This is done by typically wrapping the sticky navigation in an element that is set to the height of the navigation. Using a Javascript .onscroll event - the browser scroll event tracks for when window.scrollY is greater that the sticky navigation element's .offsetTop. This is typically a very expensive javascript call as it is done continually throughout the process of a customer's scroll. This is why functions like throttling, debouncing & requestAnimationFrame are often used to help. This is still an issue as delays in the sticky navigation can easily occur.

Fixed navigation with a scroll stop: This is when a navigation is sticky & then at a certain point the sticky nav stops. This is often done by setting a navigation to fixed & then when element reaches a scroll stopping point, the navigation is set with a position of absolute with a top position that equals the height of the stopping offset.

Scrolled distance queue navigation: This is when a navigation is set to fixed & has some sort of visual queue that lets a user know how far they've scrolled. This is often done by returning a scrolled distance relative to a total window scroll. This is done by first storing scroll in a variable & then returning it out of a function.

	var scrollPosition = 0;

	var scrollDistance = function() {
		var newScrollPosition = window.scrollY;
		if ( ( newScrollPosition > scrollPosition ) && newScrollPosition > somethingToMeasure ) {
		    	// Something to do
		} else if ( newScrollPosition < scrollPosition ) {
		      // Something else to do
		}
		return scrollPosition = newScrollPosition;
	};
	return window.addOnScroll(scrollDistance);

Device Fixed Position & Sticky Bits

Device sticky items are very undependable as many devices don't support fixed positioning or only partially support it which often creates a weird lag when a customer is scrolls a page.

Device sticky items are very undependable as many devices don't support fixed positioning

It seems that fixed position was more supported by IOS a few years ago but support has lagged as Apple has defined fixed positioning as different because of an unchangeable size for a browser window. More...

It was after trying very hard to come up with a solution for fixed position support that I decided to see if making absolute positioning work like fixed position could be a solution. It was then that I came on to this post which uses css to essentially hijack window scrolling from the window so that elements positioned absolutely can behave in a way similarly to what we'd expect with fixed position.

	html {
	  position: absolute;
	  height: 100%;
	  overflow: hidden;
	}

	body {
	  height: 100%;
	  overflow: auto;
	}

	.fixed {
	  position: absolute;
	}

I've been writing a plugin to accept standard web fixed position patterns as well as device fixed position patterns called Sticky Bits.

Here's a demo of the absolute position solution:

See the Pen Bzxmpw by Jeff Wainwright (@yowainwright) on CodePen.