JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2019 by dvoytenko (http://jsbin.com/qinarik/9/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Page 1</title>
<style>
body {
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
[c] {
margin: 8px;
padding: 16px 8px;
background: lightgray;
}
#fixed1 {
position: fixed;
ali
left: 0;
height: 25px;
width: 100%;
background: var(--bg, blue);
}
</style>
</head>
<body>
Text 1
Text 2
<div id="fixed1">Fixed Header</div>
<div c>Div 1</div>
<div c>Div 2</div>
Text 3
<div c>Div 3</div>
<script>
for (var i = 4; i < 50; i++) {
var e = document.createElement('div');
e.setAttribute('c', '');
e.textContent = 'Div ' + i;
document.body.appendChild(e);
}
var sd = document.body.attachShadow({mode: 'open'});
// Main slot will absorb all undistributed children.
var mainSlot = document.createElement('slot');
var scroller = document.createElement('div');
scroller.style = 'background: lightblue; position: absolute; top: 0; left: 0;' +
' right: 0; bottom: 0;' +
' overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;';
scroller.appendChild(mainSlot);
sd.appendChild(scroller);
// Selectively, it's also possible to distribute fixed elements separately,
// emulating fixed layer transfer.
var fixedLayer = document.createElement('div');
fixedLayer.style = 'height: 0; width: 0; position: fixed; overflow: visible;';
fixedLayer.style.setProperty('--bg', 'green');
sd.appendChild(fixedLayer);
var mainFixedSlot = document.createElement('slot');
mainFixedSlot.setAttribute('name', 'fixed');
fixedLayer.appendChild(mainFixedSlot);
function addToFixedLayer(element) {
...