JSFiddle - React, Tailwind, and code Playground

by Jaybles

HTML

<div id='object'>Top: 0px</div>

CSS

body{height:10000px;width:400px;background:url(http://dummyimage.com/60x40/eee/aaa.png&text=body)}
#object{height:200px; width:200px;background:#f00;position:absolute;top:0;left:0;}

JavaScript

//http://stackoverflow.com/questions/5273453/using-jquery-to-keep-scrolling-object-within-visible-window
$(window).scroll(function(){
    var objectTop = $('#object').position().top;
    var objectHeight = $('#object').outerHeight();    
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    
    if  (windowScrollTop  > objectTop)
        $('#object').css('top', windowScrollTop );
    else if ((windowScrollTop+windowHeight) < (objectTop + objectHeight))
        $('#object').css('top', (windowScrollTop+windowHeight) - objectHeight);        
    
    $('#object').html('Top: ' + $('#object').position().top + 'px');
    
});