sync thumb

HTML

<header>header</header>
<div class="main">
    <div><img src="http://lorempixel.com/200/300/sports/1/"></div>
    <div><img src="http://lorempixel.com/200/350/sports/2/"></div>
    <div><img src="http://lorempixel.com/200/450/sports/3/"></div>
    <div><img src="http://lorempixel.com/200/400/sports/4/"></div>
</div>
<div class="thumb">
    <div><img src="http://lorempixel.com/67/101/sports/1/"></div>
    <div><img src="http://lorempixel.com/67/117/sports/2/"></div>
    <div><img src="http://lorempixel.com/67/151/sports/3/"></div>
    <div><img src="http://lorempixel.com/67/134/sports/4/"></div>
</div>
<div class="space"></div>

CSS

body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    padding: 6px;
    background: black;
    color: white;
    height: 30px;
}

.main > div {
    line-height: 0;
}

.thumb {
    position: absolute;
    right: 0;
    top: 42px;
}

.thumb > div {
    line-height: 0;
}

.space {
    height: 1000px;
}

JavaScript

console.clear();

var $main = $('.main');
var mainTop = $main.offset().top;
var mainHeight = $main.outerHeight(true);
var $thumb = $('.thumb');
var thumbHeight = $thumb.outerHeight(true);
var scale = thumbHeight / mainHeight;

$(document).on('scroll', function() {
    var currentTop = $(window).scrollTop();
    if (currentTop <= mainTop){
    	$thumb.css('top', mainTop);
    	return;
    }
    if (currentTop >= mainTop + mainHeight)return;
    
    var mainViewTop = mainTop - currentTop;
    var thumbViewTop = mainViewTop * scale;
    var thumbTop = currentTop + thumbViewTop;
    $thumb.css('top', thumbTop);
});