There we go.
$(document).ready(function() {
function adjustPositions(){
var wrapperObj=$("#wrapper");
var magnifierObj=$("#dragMe");
var scrollerObj=$("#scroller");
var zoomObj=$("#toZoom");
var magCenterPosition=magnifierObj.offset().top+magnifierObj.height()/2-zoomObj.offset().top;
var magRelativePosition=magCenterPosition/zoomObj.height();
var newScrollerPosition=wrapperObj.height()/2-magRelativePosition*scrollerObj.height();
scrollerObj.css("top",newScrollerPosition+"px");
}
$("#dragMe").draggable({
axis: "y",
containment: $("#wrapper"),
drag: function(event, ui)
{
adjustPositions();
}
});
});
Here's a working jsFiddle example.
The example presents some sliders for playing with orange box\magnifier height.
Notice that I've changed some of your CSS to reflect the flexibility on box sizing. Mainly, the wrapper container now doesn't have a set height. Also the orange box is now relatively positioned, with margins the size of half the magnifier height, to correctly adjust the height of the wrapper container.