Miva Merchant Modules and Development
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.

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