responsive page navigator widget, 2-way interaction (used by 8mpixels.com).

navigator.js

/*
$('<div>').attr('id','navigator').appendTo('body');
$('<div>').attr('id','navigator-handle').appendTo('#navigator');

#navigator-handle{ 
    width:20px; 
    height:15px; 
    background:rgba(0,0,0,.2); 
    cursor:move; 
    position:relative;
} 
#navigator{ 
    position:fixed; 
    bottom:120px; 
    right:10px; 
    border:2px solid #fff;
    width:100px; 
    height:56px; 
    box-shadow:0 0 3px rgba(0,0,0,.2);
    -moz-box-shadow:0 0 3px rgba(0,0,0,.2);
    -webkit-box-shadow:0 0 3px rgba(0,0,0,.2);
}	
*/


var $navigator = (function($){ 
     
    var $handle = $('#navigator-handle');
    var $square = $('#navigator'); 
 
    var dragg = new Draggabilly('#navigator-handle',{containment:'#navigator'});
    var isMoving;
    var moveTimeout;
 
    var _normalize = function(val,min,max){
        if(val>max){
            return max;
        }else if(val<min){
            return min;
        }else{
            return val;
        }
    }
 
    //ajust sizes
    var imgW = 3840;
    var imgH = 2160;
    var navW = 100;
    var navH = 59;
 
    var areaW, areaH; 
    var ratioW, ratioH; 
    var handleW, handleH;
  
    var _updateSize = function(){
        areaW = window.innerWidth;
        areaH = window.innerHeight-112-53
 
        handleW = Math.ceil( areaW*100 / (imgW) );
        handleH = Math.ceil( areaH*100 / (imgH) ); 
  
        $handle.height(_normalize(handleH,12,navH)).width(_normalize(handleW,12,navW));
    }
 
    _updateSize();
     
     
    var onMove = function(ev,pointer,vector){ 
        isMoving = true;
        var pos = $('#navigator-handle').position();
 
        var rateX = _normalize((pos.left*100)/(navW-handleW),0,100)/100;
        var rateY = _normalize((pos.top*100)/(navH-handleH),0,100)/100;
 
        console.log(rateX,rateY);
         
        window.scrollTo((imgW-areaW)*rateX,(imgH-areaH)*rateY);
 
        moveTimeout = setTimeout(function(){isMoving=false},150);
    }
      
 
    var onScroll = function(ev){
        if(isMoving) return;
 
        var scrX = window.scrollX;
        var scrY = window.scrollY;
 
        var rateX = _normalize((scrX*100)/(imgW-areaW),0,100)/100;
        var rateY = _normalize((scrY*100)/(imgH-areaH),0,100)/100;
 
          
        console.log(rateX,rateY);
 
         
        $('#navigator-handle').css('left',(navW-handleW)*rateX);
        $('#navigator-handle').css('top',(navH-handleH)*rateY);
    }
  
 
    //dragg.on('dragMove',);
    dragg.on('dragEnd',onMove);
    $(window).resize(_updateSize);
    $(window).scroll(onScroll);
 
    return {
        isMoving: function(){return isMoving;},
        container:$square, 
        draggable:dragg
    };
 
})(jQuery);