position: sticky vs position: fixed

In CSS, you can use both position: sticky and position: fixed to make any WordPress block sticky, but there are some important differences that should be noted.

position: sticky keeps that element within the document flow. Great for things like columns and sidebars that have content above them. When the user scrolls to a certain position, the element will become sticky or return to the normal document flow, based on user input.

position: fixed removes the element from the normal document flow, FIXING it to a specific position (top, bottom, left right). It’s position remains fixed, regardless of user input.

For more info on how position works, check out this MDN article on CSS Position.

Target Your Element

Making elements sticky has a variety of useful applications such as sidebars, and calls to action, but in my case I want to make the main header element of my page (a navigation menu) stick to the top of the page as the user scrolls.

Since the main navigation menu will remain at the top of the page at all times, I’m going to use position: sticky because I want it to remain in the normal document flow. If I were to use position: fixed, yes, the menu would stick to the top of the page, but the rest of my webpage will float up underneath my menu, and you won’t be able to see it.

If you’re targeting a specific block, you may want to give it a class or ID and target that way, but in my case, I’m fine just grabbing the entire <header> element:

header {
	position: sticky;
	top: 0;
	width: 100%;
	margin: 0 auto;
}

Possible Reasons position: sticky Isn’t Working:

1.) Check if a threshold has been specified

position: sticky requires a threshold to be specified. Make sure that you’ve set something other than auto for any of the following properties:

• top
• right
• bottom
• left

2.) Check your vendor prefixes

If you’re on Safari, you may need to add a webkit prefix to your position: sticky call:

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

3.) Check for overflow rules

If you have the overflow property set on any parent or ancestor of the sticky element, the position: sticky rule won’t work.

However, if you specify a height on the overflowing container, then sticky will work.