scrollbar class logic resize
<p>i have been making a custom scroll bar as i want to learn and make it into my own re useable class so i have been playing around to make one (I chose to make a scroll bar because i looked at it and thought that it was an easy thing) but i have now got really stuck with the window resize part...</p>

<p>when a window is resized to a smaller a normal scroll bar face will both 'shrink' in size and 'move up wards' on the track to represent its position.</p>

<p>can someone please help me to understand the following:
the problem is that i cannot figure out how to make it move up wards (i think it is by half the amount it shrinks?) and i think that also i may have made a mistake here:
$('#area').css({'top':'-'+ (($(this).position().top)* 2) +'px'}); I think maybe it is a mistake because of assuming that i must * by 2, i have done this because my content is twice the height of my view but i dont think that this is dynamic i am not sure?</p>

<p>on this test #area is my content, #areascroll is my visible content area or view</p>

<p>i will next be learning about using this as a class that i can apply to any div</p>

<p>script:</p>

<pre><code>$('#areascroll').css({'height':$(window).height() - 80 +'px'});
    $('#main').prepend('&lt;div class="H_track"style="position:fixed;top:60px;right:0px;width:10px;height:'+$('#areascroll').height()+'px;background:rgba(0,0,0,0.3);"&gt;'+
                       '&lt;div class="H_face"style="position:relative;right:0px;width:10px;height:0px;background:rgba(255,255,255,0.5);"&gt;&lt;/div&gt;'+
                       '&lt;/div&gt;');
    scrolll();
    $('.H_face').hover(function(){$(this).css({'background':'rgba(255,255,255,1)'});},function(){$(this).css({'background':'rgba(255,255,255,0.5)'});}).draggable({containment:'parent',drag:function(event,ui){
        $(this).css({'background':'rgba(255,255,255,1)'});
        $('#area').css({'top':'-'+ (($(this).position().top)* 2) +'px'});
        scrolll();
        }});

$(window).resize(function(){
    $('#areascroll').css({height:$(window).height() - 80 +'px'});
    scrolll();
    });


function scrolll(){
    $('.H_track').css({'height':$('#areascroll').height() +'px'});
    var areaContentRatio=$('#areascroll').height() / $('#area').height();
    var faceSize = $('.H_track').height() * areaContentRatio;
    $('.H_face').css({'height':faceSize+'px'});
    var unseenScrollAreaSize = $('#area').height() - $('#areascroll').height();
    var areaPositionRatio=(Math.abs($('#area').position().top)) / unseenScrollAreaSize;
    var trackScrollAreaSize = $('.H_track').height() - faceSize;
    var facetop = trackScrollAreaSize * areaPositionRatio;
    $('.H_face').css({'right':'0px','top':facetop +'px'});// how to change?
    }
</code></pre>
