JSFiddle - React, Tailwind, and code Playground

by armin

HTML

Scroll down and hover wildly over sticky rows (red ones). Some will disappear but are still at the dom. Further scrolling or changing something (p.e. toggle css rule) will bring them back.

CSS

table {
    display: flex;
    flex-direction: column;
    width: 100px;
}

JavaScript

var table = document.createElement('table');
		document.body.append(table);

		var stickyRows = 0;

		// Append all rows with equal height
		for (var i = 0; i < 1000; i++) {

			const tr = document.createElement('tr');
			const td = document.createElement('td');

			td.textContent = 'Zeile ' + i;
			tr.append(td);
			tr.style.height = 30 + 'px';
			// Every 10th row is sticky
			if (!(i % 10)) {

				tr.style.position = 'sticky';
				tr.style.top = (stickyRows * 30) + 'px';
				tr.style.backgroundColor = 'red';
				stickyRows = stickyRows + 1;
			}
			table.appendChild(tr);
		}