Fade in at specific scrollTop and fixed position in the middle.
Background Image:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
1 2 3 4 5 6 7 |
#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;} |
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
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' }); } |