STICKY: CSS AND META FOR STICKY ELEMENT

THIS CODE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED;
THE AUTHOR DISCLAIMS ALL LIABILITY FOR ANY DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR STORE DISRUPTIONS ARISING FROM ITS USE.

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

sticky css

STICKY: CSS AND META FOR STICKY ELEMENT

Miva Random Code Trivia

STICKY: CSS AND META FOR STICKY ELEMENT