Floating Pagination Menu | Rex's Personal Site

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

Background Image:

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

<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;}

#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 = $(&#39;#pagination&#39;);
	var $blocks = $(&#39;#content &gt; .wrapper &gt; .block&#39;);
	var blocks = [];

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

		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 &lt; blocks.length; i++){
	        	if(data.curTop &gt;= blocks[i].from &amp;&amp; data.curTop <= blocks[i].to){
	        		if($.inArray(blocks[i].id, white_blocks) &gt; -1){
	        			$page_nav.addClass(&#39;white&#39;);
	        		}

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

	

}


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

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

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

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'

});

}

M	T	W	T	F	S	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31