JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<div id="wrap">
    <div id="content">blabla</div>
</div>

CSS

div {border: 1px solid #ccc; width: 400px;}
#wrap {height: 400px; position: relative; background: #09f;}
#content {position: relative; top: 30px; height: 150px; background: #cfe;}

JavaScript

var $wrap = $('#wrap'),
    $content = $('#content'),
    topEdge = 0,
    bottomEdge = $wrap.height();


$content.draggable({
    axis: 'y',
    stop: function(){
        refresh();
    }
});

function refresh(){
    var didReachTop = $('#content').position().top <= 0,
        didReachBottom = $('#content').position().top + $('#content').height() >= bottomEdge;
    
    console.log(
        'Reached the top?', didReachTop,
        ' Reached the bottom?', didReachBottom    
    );
}