Fade in at specific scrollTop and fixed position in the middle.

Background Image:

		<ul id="pagination" 
                data-anchor-target="#belief"
                data-center-top="display:block; opacity:0;"
                data-top-top="opacity:1;">
                <li><a href="#header"></a><div><span>Index</span></div></li>
                <li><a href="#belief"></a><div><span>Our believe</span></div></li>
                <li><a href="#capabilities"></a><div><span>Capabilities</span></div></li>
                <li><a href="#design"></a><div><span>Design Thinking</span></div></li>
                <li><a href="#travel"></a><div><span>Travel spray</span></div></li>
                <li><a href="#twistup"></a><div><span>Twist up</span></div></li>
                <li><a href="#innovative"></a><div><span>Innovative</span></div></li>
                <li><a href="#dispensing"></a><div><span>Dispensing</span></div></li>
                <li><a href="#treatment"></a><div><span>Treatments</span></div></li>
                <li><a href="#contact"></a><div><span>Contact</span></div></li>
            </ul>

#pagination{display:none; list-style: none; margin: 0px; padding:0px; top:100px; right: 38px; position: fixed; z-index:5;}
#pagination li{width: 10px;height: 25px;position: relative; overflow: }
#pagination li div{color:#000; position: absolute; right:20px; top:0px; text-align: right; font-family: Verdana; font-size: 11px;width: 120px;height: 25px;overflow: hidden; display:none;}
#pagination li span{display: block;position: absolute; right:-120px; top:0px;}
#pagination a{display: block; width: 10px; height: 10px; background: url(../images/page_dot.png) 0px -20px no-repeat;  position: absolute; right: 0px;top: 5px;}
#pagination a.active{background-position: 0px 0px;}
#pagination.white li span{color:#FFF;}

window.onload = function() {
	var $page_nav = $('#pagination');
	var $blocks = $('#content > .wrapper > .block');
	var blocks = [];

	$blocks.each(function(index){
		var $this = $(this);
		var item = {};
		item.id = $this.attr('id');

		var top = $this.offset().top;
		var h = $this.height();
		item.from = top - h / 2;
		item.to = top + h / 2;

		blocks.push(item);
	})

	//White pagination
	var white_blocks = ['capabilities', 'contact'];

	skrollr.init({
		render: function(data) {
			//console.log(data.curTop);

	        //Change pagination color
	        for(var i = 0; i < blocks.length; i++){
	        	if(data.curTop >= blocks[i].from && data.curTop <= blocks[i].to){
	        		if($.inArray(blocks[i].id, white_blocks) > -1){
	        			$page_nav.addClass('white');
	        		}

	        		$page_nav.find("a.active").removeClass("active");
	        		$page_nav.find('a[href="#' + blocks[i].id + '"]').addClass('active');
	        		
	        		break;
	        	}else{
	        		$page_nav.removeClass('white');
	        	}
	        }
	        //console.log(data.curTop);
	    }
	});

	

}


function init_page_nav(){
	//Quick nav click handler
	$('#pagination li a').click(function(e){
		e.preventDefault();
		var $this = $(this);
		$.scrollTo($($this.attr('href')), 800);
		
	});

	$('#pagination li a').hover(
		function(){
			var $this = $(this);
			var $li = $this.parent('li');
			$li.find('div').show();
			TweenMax.to($li.find('div span'), 0.2, {right:0});
		}, function(){
			var $this = $(this);
			var $li = $this.parent('li');
			TweenMax.to($li.find('div span'), 0.2, {right:-120, onComplete: function(){
				$li.find('div').hide();
			}});
		}
	)

	$('#pagination').css({
		top: ($(window).height() - $('#pagination').height()) / 2 + 'px'
	});
}