jQuery: pageOverview

HTML

<div class="spot one">1st</div>
<div class="spot two">2nd</div>
<div class="spot three">3rd</div>

<div id="map"></div>

CSS

body{font-family: sans-serif; background-color: whiteSmoke}

/* SPOTS */
.spot {
    position: absolute;
    width: 64px;
    height: 64px;
    line-height: 64px;
    color: deeppink;
    text-align: center;
    background: indigo
}

.one {
    top: 500px;
    left: 500px
}

.two {
    top: 1000px;
    left: 1000px
}

.three {
    top: 100px;
    left: 1500px
}


/* OVERVIEW */
#map {
    position: fixed;
    bottom:0;
    left:0;
    width: 160px;
    height: 120px;
    background: #222;
    background: rgba(0,0,0,0.5)
}

.pointer {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

JavaScript

var Overview = (function() {

    $('.spot').each(function() {
        var el = $(this),
            box = $('#map'),
            point = document.createElement('span');

        point.className = 'pointer';
        box.append(point);

        var offsetX = el.offset().left / 4,
            offsetY = el.offset().top / 4,
            winW = $(window).width(),
            winH = $(window).height(),

            boxWidth = box.width() - $(point).width(),
            boxHeight = box.height() - $(point).height(),

            posX = offsetX / winW * boxWidth,
            posY = offsetY / winH * boxHeight;

        $(point).css({
            top: posY,
            left: posX
        });
    });

})();