STICKY: CSS AND META FOR STICKY ELEMENT

Miva Knowledge Base
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.
Important Notice: This information is for internal reference only. Use at your own risk.

STICKY: CSS AND META FOR STICKY ELEMENT

Scot Ranney • August 06, 2024

HEAD Section:

1. Add the following meta line to the head section so that sticky works properly on mobile. Without this meta the sticky works strange on mobile and possibly also has problems on desktop.

<head>
....
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi">
....
</head>

2. Add the following CSS. This is for a div but can be changed for a tr or whatever.

<style>
...

div.sticky 
{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	background-color: white;
}
...
</style>

HTML

<div class="sticky">
	<p>Anything inside this div will "stick" to the top once we have started scrolling past it.</p>
</div>
https://www.scotsscripts.com/mvblog/sticky-css-and-meta-for-sticky-element.html

mvkb_sticky mvkb_css