Miva Merchant Development by Scot's Scripts

STICKY: CSS AND META FOR STICKY ELEMENT

Miva Knowledge Base

Important Notice: This information is for internal reference only. Use at your own risk.

Does Google actually understand your Miva Merchant store? Our JSON-LD schema generator makes sure it does. Contact us to get started. (more info)

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