JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<div id="scroll-wrapper">
<h1>I don't wanna move!</h1>
<svg class="fixed" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="1200px">
<path
style="fill:none;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0" data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;" 
    d="M357.71,460.48L357.71,460.48c0,194.92,158.02,352.94,352.94,352.94h40.94    c200.38,0,362.82,162.44,362.82,362.82v0c0,200.38-162.44,362.82-362.82,362.82h-69.18c-179.33,0-324.71,145.38-324.71,324.71v0    c0,179.33,145.38,324.71,324.71,324.71h79.06c194.92,0,352.94,158.02,352.94,352.94v0c0,194.92-158.02,352.94-352.94,352.94    h-55.06c-192.58,0-348.71,156.12-348.71,348.71v0c0,192.58,156.12,348.71,348.71,348.71h46.59    c199.6,0,361.41,161.81,361.41,361.41v0c0,199.6-161.81,361.41-361.41,361.41h-46.59c-192.58,0-348.71,156.12-348.71,348.71v0    c0,192.58,156.12,348.71,348.71,348.71h42.35c201.94,0,365.65,163.71,365.65,365.65v0c0,201.94-163.71,365.65-365.65,365.65    h-49.41c-188.69,0-341.65,152.96-341.65,341.65v0c0,188.69,152.96,341.65,341.65,341.65h0c229.23,0,415.06,185.83,415.06,415.06    v446.12"
			/>
		</svg>
</div>

CSS

h1 {
    position: fixed;
}

svg.fixed {
    position: fixed;
}

#scroll-wrapper {
    height: 1200px;
}

JavaScript

skrollr.init({
		forceHeight: true
	});