JSFiddle - React, Tailwind, and code Playground

by Ben Clayton

HTML

<div class="container">
	<div class="bck">Hello</div>
	
</div>

CSS

.body {
	height:3000px;
}

.container {
	height:3000px;
	position:fixed;
	width:100px;
	background-image: url(https://cdn.pixabay.com/photo/2017/05/08/08/35/star-field-2294797_960_720.jpg);
}


.bck {
	position:fixed;
	height:3000px;
	width:100%;
	
}

JavaScript

var velocity = 0.5;

function update(){ 
var pos = $(window).scrollTop(); 
$('.container').each(function() { 
    var $element = $(this);
    // subtract some from the height b/c of the padding
    var height = $element.height()-18;
    $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) +  'px'); 
   }); 
};

$(window).bind('scroll', update);