You'll need these scripts in the <head> of your html page
<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
Here's the script that make the whole thing function properly
$(window).bind('scroll',function(e){
stickToTop();
});
var elementRightY = parseInt($("elementRight").offset().top), scrollRatio = 0.8;
var elementMiddleY = parseInt($("#elementMiddle").offset().top);
var elementMiddleX = parseInt($("#elementMiddle").offset().left);
var elementLeftY = parseInt($("#elementLeft").offset().top);
function stickToTop(){
var scrolled = parseInt($(window).scrollTop());
if(scrolled >= elementRightY*scrollRatio){
$("elementRight").css({
"position":"fixed",
"top":"0"
});
}
if(0 <= scrolled && scrolled < elementRightY*scrollRatio) {
$("elementRight").css({
"position":"absolute",
"top":elementRightY-scrolled/4
});
}
if(scrolled >= (elementMiddleY+$("#topHeader").outerHeight())*scrollRatio){
$("#elementMiddle").css({
"position":"fixed",
"top":$("#topHeader").outerHeight(),
"left":elementMiddleX
});
}
if(0 <= scrolled && scrolled < elementMiddleY*scrollRatio) {
$("#elementMiddle").css({
"position":"relative",
"left":"0"
});
}
if(scrolled >= elementLeftY*scrollRatio){
$("#elementLeft").css({
"position":"fixed",
"top":"0"
});
}
if(0 <= scrolled && scrolled < elementLeftY*scrollRatio) {
$("#elementLeft").css({
"position":"absolute",
"top":elementLeftY-scrolled/4
});
}
}