<div class="test"></div>

<div class="nav-wrap">
  <ul class="nav-text"></ul>
  <div class="bg"></div>
</div>


<div class="page-wrap">
  <div class="grid">
    <h1>Story</h1>

    <div class="chapter">
      <h2>Chapter 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet urna ex, a accumsan augue aliquam quis. Nullam hendrerit est ac lacinia accumsan. Nam egestas interdum venenatis. Fusce ultricies enim at viverra euismod. Aliquam ullamcorper
        vulputate faucibus. Aenean tincidunt risus non consectetur commodo. Ut porttitor congue iaculis. Nunc aliquet ullamcorper ante eu cursus. Maecenas dignissim metus eu felis sollicitudin, id vehicula libero egestas. Nulla interdum massa sit amet
        felis fermentum fermentum. Aliquam erat volutpat. Curabitur interdum malesuada nisl sed varius. Fusce ut nulla ut turpis fringilla dignissim. Duis sed scelerisque nisi. Donec pretium nunc a metus faucibus mollis. Quisque eu bibendum nunc, ac malesuada
        magna.</p>

      <p>Aliquam faucibus finibus ultricies. Nam enim lacus, aliquam et erat nec, rutrum aliquam tellus. Nulla pharetra sem eget velit dictum malesuada. Sed varius, nisl ac dignissim condimentum, magna nulla placerat urna, in dictum erat justo in nibh. Aenean
        eget mattis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu condimentum magna, eget maximus nisl. Vestibulum odio augue, luctus eget odio tincidunt, tempor ultricies ipsum. Ut pulvinar a eros sed vestibulum. Maecenas vulputate
        interdum rutrum. Quisque metus tortor, placerat at ornare ut, hendrerit non risus. Cras imperdiet vehicula ligula, sit amet tempor sapien commodo sit amet. Sed eget aliquet ex. Ut urna lacus, ultricies sit amet elit vestibulum, bibendum vulputate
        velit.</p>

      <p>Morbi eu orci sed magna fringilla eleifend. In hac habitasse platea dictumst. In justo dolor, dignissim et enim ac, iaculis feugiat lectus. Aliquam nec sodales massa, at finibus dolor. Cras iaculis mi felis. Nullam vel gravida eros. Pellentesque
        ex enim, elementum ornare lacinia quis, semper sed libero. Duis tristique lectus elit, at mattis felis semper eu. Proin suscipit, nulla ut pretium blandit, lorem tellus pulvinar sapien, in sollicitudin eros arcu sed enim. Etiam vehicula, turpis
        quis luctus viverra, nisi elit interdum dui, eget egestas nibh nulla ac nunc. Nunc consectetur, nibh ut pellentesque dignissim, nisl lacus suscipit lectus, sit amet pharetra erat sem molestie nunc. Aenean rutrum mattis turpis at varius. Vestibulum
        ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vel dolor sapien. Nam gravida nulla volutpat, maximus tortor ut, aliquam orci.</p>
    </div>

    <div class="chapter">
      <h2>Chapter 2</h2>
      <p>Mauris ac lectus magna. Donec id dignissim lacus. Vivamus vulputate, lectus ac interdum fermentum, urna magna feugiat ex, vel elementum nunc risus vulputate neque. Praesent ut tincidunt est, non rutrum neque. Suspendisse tempor sagittis ipsum eget
        posuere. Curabitur nulla velit, tempus in tristique quis, hendrerit et mauris. Fusce eget sagittis mauris. Donec non mauris vitae risus placerat venenatis. Nunc eleifend dui sit amet enim mollis molestie vel in est. Aliquam suscipit tortor sem,
        id molestie lectus vehicula ut.</p>

      <p>Maecenas at eros ligula. In hac habitasse platea dictumst. Curabitur tortor mauris, volutpat congue ultricies eget, fringilla ac lacus. Etiam sodales justo sit amet quam dignissim, sed convallis orci elementum. Mauris tristique nulla eget nulla
        fermentum semper. Etiam sollicitudin elit in magna tempus tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam a lacus id elit blandit tincidunt a condimentum eros. Mauris egestas imperdiet
        lacus eu rhoncus. Integer laoreet, urna in commodo maximus, sapien ante euismod nibh, sit amet pharetra velit ante eget purus. Nam eget pulvinar nunc, sit amet feugiat leo. Sed egestas pharetra facilisis. Nam dictum volutpat massa eu hendrerit.
        Sed ut mauris quis justo vehicula fringilla. Donec sed arcu eget ex maximus dignissim. Suspendisse ut tortor vel lorem fringilla scelerisque vel ac lorem.</p>

      <p>Aliquam semper finibus purus eget placerat. Maecenas enim nunc, vestibulum molestie sagittis vel, viverra sit amet nisi. Aenean id ultricies augue, ac rutrum enim. Phasellus vulputate mi quis lacinia tempus. Aliquam blandit dolor neque, in sodales
        ante vulputate eu. Suspendisse auctor est nec ligula tristique, quis sodales odio varius. Curabitur pulvinar sagittis malesuada. Integer augue mi, mollis nec odio fringilla, ornare lacinia ligula. Aliquam commodo pharetra leo ac pretium.</p>

      <p>Aenean ut eros ornare, porttitor est sit amet, malesuada erat. Sed sed elit non ipsum sodales commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada justo a elit tempus commodo. Etiam euismod tellus sit amet turpis ornare
        volutpat. Sed et erat sit amet ligula consectetur sodales at ut est. Quisque sapien tortor, lobortis sit amet metus a, volutpat pulvinar tellus. Etiam sit amet eros tempus, iaculis turpis et, ullamcorper neque. Maecenas scelerisque venenatis volutpat.
        Cras pulvinar sapien sit amet arcu imperdiet blandit. Quisque tortor libero, congue sit amet fermentum ut, placerat sed leo. Maecenas ut ante elementum, laoreet dolor nec, rhoncus orci. Donec urna nisl, vestibulum vitae tempus rurum, varius eget
        nisl.</p>

      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In laoreet mattis neque, quis ultricies massa. Nam tristique volutpat auctor. In sagittis, nibh id semper rutrum, urna diam rutrum nisl, sit amet consequat magna
        erat vitae leo. In vel nulla pellentesque velit aliquam ornare in sit amet diam. Praesent vitae justo at mauris dignissim maximus ac ac ex. Sed eu vestibulum lacus. Nunc sit amet urna eu metus bibendum feugiat. Ut a interdum augue. Donec eu mi
        at justo rhoncus lacinia sed vitae turpis. In hac habitasse platea dictumst.</p>

    </div>

    <div class="chapter">
      <h2>Chapter 3</h2>
      <p>ris vel est sed eros hendrerit malesuada. Duis iaculis euismod quam, tincidunt dictum magna venenatis eget. Cras quis convallis dui. Duis dapibus quis purus dictum porttitor. Proin a consequat lorem. In ac elementum nisl. Aliquam commodo mi eu ex
        feugiat luctus non eu velit. Vivamus a turpis a metus volutpat dictum a sed nisi. Ut in dapibus ex, sit amet sagittis turpis. Sed ipsum dolor, viverra at sem at, auctor consectetur justo.</p>

      <p>Praesent sed enim nec dui imperdiet tempor. Praesent sed diam eu magna bibendum iaculis. Proin ac justo aliquam, mattis dolor vitae, tristique lectus. Duis aliquet non est a maximus. Duis viverra viverra turpis, sed rutrum dui ornare quis. Pellentesque
        ut blandit erat. Vestibulum dui erat, ultrices ut quam sit amet, maximus hendrerit metus. In hac habitasse platea dictumst. Sed a libero quis nisl sagittis tristique sed sit amet dui. Duis tempus vulputate ornare. Pellentesque tincidunt ex sed
        massa consectetur, sed faucibus lacus fringilla. Sed ut tempus mi, ut volutpat odio. Vestibulum sapien neque, mattis pharetra ipsum nec, consectetur malesuada tellus. Duis bibendum justo in cursus bibendum. Donec tristique iaculis nisl, in efficitur
        dolor blandit et. Nulla facilisi.</p>

    </div>

    <div class="chapter">
      <h2>Chapter 4</h2>
      <p>Cras mattis eros ut sapien ultricies eleifend. Sed augue dui, ornare non imperdiet sit amet, facilisis id massa. Etiam non gravida lectus. Praesent urna erat, rutrum ac lectus condimentum, fermentum sagittis ante. Vestibulum pretium tincidunt felis,
        in mollis orci vulputate et. Curabitur in nisi sit amet quam dictum interdum at in mauris. Morbi imperdiet et lacus sed vehicula. Vivamus magna diam, imperdiet quis scelerisque eu, sagittis pellentesque nisl.</p>

      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed quis sagittis nibh. Quisque mollis nisl at imperdiet posuere. Vivamus pellentesque tempus magna, eu fermentum sem rutrum quis. Quisque eu pulvinar turpis.
        Maecenas molestie justo lacinia, consequat nibh a, egestas mauris. Sed iaculis ultrices purus at fringilla. Praesent hendrerit lorem at dapibus consectetur. Nam posuere sapien in dui lobortis rhoncus suscipit eget ligula. Ut imperdiet dui dui,
        eu pulvinar lacus tristique a. Nunc ac facilisis sapien, id elementum nisl.</p>

      <p>Sed a quam quis dolor suscipit convallis nec vel orci. Praesent mollis turpis vulputate sem ullamcorper volutpat. Vivamus lobortis fermentum sapien, sit amet eleifend elit congue ut. Vivamus at nunc et velit finibus elementum quis in eros. Proin
        ipsum nibh, tempus vel egestas vulputate, scelerisque quis tellus. Etiam eu nulla nisl. Aenean et nibh eleifend, venenatis justo vitae, sagittis quam. Etiam felis nulla, elementum vitae sapien ut, fermentum laoreet ligula. Proin vel diam sed odio
        fermentum faucibus.</p>

      <p>Vivamus sed vehicula eros. Aenean arcu ex, blandit quis pharetra ac, ullamcorper rutrum orci. Sed vel nulla bibendum, rhoncus quam nec, dictum magna. Etiam scelerisque dapibus turpis. Pellentesque molestie quam vel odio porttitor blandit. Donec
        nec porttitor dui, sed eleifend quam. Morbi vel tellus ac enim aliquam varius quis non nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet nunc mattis, faucibus mauris vitae, sodales enim. Proin in magna et justo ornare
        accumsan vitae eget arcu. Aenean ullamcorper placerat pharetra. Mauris iaculis congue nulla, nec feugiat neque imperdiet sit amet. Proin ut ultricies magna. Ut blandit cursus suscipit. Cras vel tellus nibh. Etiam a eleifend neque, id egestas quam.</p>


    </div>

    <div class="chapter">
      <h2>Chapter 5</h2>
      <p>Integer volutpat ac nulla commodo tincidunt. Duis venenatis sed nisl non feugiat. Vivamus maximus nibh nulla, id accumsan metus ornare et. Donec at dolor varius, vestibulum augue maximus, fringilla quam. Aenean non semper quam. Nullam accumsan velit
        et massa finibus, quis porta ante hendrerit. Cras id dui metus. Vivamus dapibus, nisl ut interdum efficitur, eros urna ullamcorper massa, in eleifend felis diam eget mauris. Proin ut consequat sem. Nulla at volutpat erat. Fusce interdum pulvinar
        porta. In eu egestas nisi, ut elementum ex. Quisque eget pellentesque mi, in tristique diam. Maecenas dictum est vel tellus sagittis dignissim. Mauris ac vehicula sapien.</p>

      <p>Aliquam non leo in purus posuere pharetra eu ac lacus. Etiam consectetur congue urna et posuere. Nam maximus massa felis, non auctor neque semper eu. Morbi a vulputate nibh, at mollis tellus. Aliquam erat volutpat. Donec gravida lectus fermentum
        dui vehicula sollicitudin. Mauris vehicula mattis finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque convallis enim sit amet dolor rhoncus elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
        posuere cubilia Curae; Phasellus vel metus enim. Nam ex turpis, efficitur ut tempus a, mattis nec ipsum. Sed et viverra nulla, eget euismod risus. Nullam ut ultrices quam. Suspendisse potenti.</p>

      <p>Sed eu convallis ligula, non viverra diam. Cras eu molestie mi, nec imperdiet sem. Nunc aliquam justo dictum elementum lacinia. Integer finibus suscipit sapien, ac auctor lorem vestibulum id. Praesent sit amet euismod elit, et aliquam arcu. In pellentesque
        elit nibh, et tempor justo consectetur vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis metus tempor, tempor lorem quis, aliquam mauris. Aliquam viverra ipsum sed consectetur iaculis. Aliquam
        a nibh in massa faucibus fringilla non ac urna. Cras eros quam, pellentesque id libero sit amet, mollis maximus purus. Curabitur pulvinar bibendum sagittis. Phasellus aliquet tellus est, eu cursus lorem fermentum a. In iaculis id orci et ultrices.</p>

      <p>Integer diam leo, molestie vitae porttitor vitae, sagittis vitae dolor. Aenean maximus mi non lacinia ullamcorper. Maecenas nec lobortis neque. Morbi nec ultricies sem. Quisque eget tellus tincidunt, ornare nulla vitae, dapibus augue. Fusce odio
        lectus, ultricies sit amet metus in, rutrum sollicitudin massa. Praesent laoreet id elit ut rhoncus. Vivamus consequat dolor et scelerisque venenatis. Phasellus arcu tortor, posuere nec imperdiet et, scelerisque vitae sem. Morbi nec lectus erat.
        Nulla facilisi. Morbi efficitur erat vitae justo dapibus, et ultricies lacus dictum. Pellentesque id pellentesque libero. Ut nec tempus nulla. Aliquam volutpat semper nulla ut scelerisque. Morbi erat arcu, suscipit vitae condimentum et, hendrerit
        nec turpis.</p>

      <p>Integer ac orci vitae mi interdum mattis. Cras sagittis purus ac purus aliquam, vitae egestas arcu luctus. In hac habitasse platea dictumst. Etiam augue ipsum, ultrices sit amet erat nec, molestie tristique nisi. Donec luctus eleifend magna, a luctus
        odio convallis sed. Ut a mattis mauris. Donec et varius eros, sed pellentesque lacus. Maecenas eu pulvinar ipsum. Cras rhoncus cursus justo, ac mollis ante condimentum at. Proin porta lacus sed posuere euismod. Morbi sed condimentum libero. Pellentesque
        in placerat ex. Morbi mattis ex eget turpis vulputate convallis.</p>

      <p>Nam blandit nunc nec metus vestibulum, at placerat sapien porttitor. Donec auctor odio eu blandit pulvinar. In eleifend vestibulum venenatis. Nam at dictum ipsum, a pharetra lorem. Nulla suscipit ante sed magna aliquam venenatis. Fusce aliquam,
        lectus et ullamcorper aliquet, urna nisl egestas nulla, sed molestie felis ipsum non sapien. Duis id condimentum arcu, sit amet condimentum neque. Donec pharetra mollis ante, at malesuada mauris sollicitudin non. Curabitur in ligula elit. Morbi
        a orci eu mauris hendrerit pretium id vitae justo. Nunc pellentesque, magna sed volutpat mollis, ante augue interdum dui, id porttitor arcu felis et sem. Aliquam dignissim quam quis molestie vehicula.</p>

      <p>Duis eu velit a mi tincidunt ornare. Pellentesque magna felis, egestas quis vestibulum non, hendrerit at nunc. Fusce eget rutrum magna. Fusce nisi sapien, rhoncus in tincidunt semper, ultricies in justo. Etiam porta sem dui, eu facilisis ex maximus
        in. Proin id gravida ipsum, quis viverra nisl. Nulla condimentum iaculis libero. Vivamus et efficitur purus.</p>

      <p>Vivamus accumsan erat sit amet felis vestibulum dapibus. Maecenas id arcu nec tellus molestie venenatis vitae egestas augue. Mauris mollis sed turpis non ultricies. Nam eleifend sem quis dapibus scelerisque. Sed urna lectus, pellentesque eu felis
        nec, condimentum interdum ante. Proin efficitur libero risus, sit amet tincidunt ipsum pulvinar at. Suspendisse enim ipsum, facilisis sit amet ex et, ornare ultrices sapien. Phsellus maximus eu est vel pellentesque. Cras et molestie massa.</p>

      <p>Maecenas ac nunc quis dui cursus cursus. Aliquam eget mollis tellus. Duis non sagittis mauris, eget molestie massa. Aliquam interdum nisi in elit laoreet, ut lacinia nunc fringilla. In commodo dignissim mauris, ac aliquet eros volutpat in. Nullam
        in turpis non magna dapibus commodo. In libero lectus, ultricies id augue consectetur, dignissim venenatis tellus. Duis sed est dictum, feugiat tellus et, luctus ipsum. Vestibulum risus erat, venenatis in ullamcorper ut, suscipit et turpis. Sed
        vulputate metus vitae quam pretium suscipit. Phasellus hendrerit lorem non convallis vestibulum. In nec tellus laoreet, placerat est eget, eleifend dolor. Vivamus varius augue non justo dignissim posuere et vel diam.</p>

    </div>

    <div class="chapter">
      <h2>Chapter 6</h2>
      <p>Nam venenatis pretium dui eu viverra. Aliquam in est sem. Vestibulum a diam sagittis, tincidunt dolor non, porta enim. In et euismod nulla. Nam eu turpis consequat, aliquet risus id, vestibulum ex. Praesent a sapien sed neque laoreet malesuada.
        Etiam tristique, magna scelerisque porttitor congue, nisl augue fermentum dui, eu sollicitudin enim mi sit amet nisl. Pellentesque ligula neque, varius sed feugiat sed, hendrerit eget dui. Nam auctor mollis nulla, vel venenatis leo accumsan sed.
        Curabitur sed faucibus tortor. Aliquam fringilla, est ut auctor molestie, magna lacus ultrices erat, eu elementum est nunc non nunc. In hac habitasse platea dictumst. Suspendisse turpis est, lobortis sed volutpat fringilla, commodo quis lectus.
        Fusce fermentum mollis volutpat. Curabitur aliquet sagittis odio et laoreet.</p>

      <p>Praesent cursus, purus ac commodo finibus, odio tortor congue orci, sed vestibulum felis lorem sit amet eros. Aenean volutpat justo non justo feugiat, vel pretium arcu dapibus. Morbi tortor nunc, feugiat quis velit tristique, tincidunt commodo est.
        Nulla dui urna, mattis at ligula a, auctor tincidunt dui. Pellentesque sed lorem ut arcu scelerisque mollis nec ac sem. Nam a sodales nunc, quis ultricies tortor. Quisque porttitor venenatis maximus. Integer pharetra massa tortor, a varius est
        porta vitae. Aenean id ex quis erat cursus faucibus sit amet id diam. Nunc et ex tellus. Pellentesque congue elit vel ante convallis fermentum. Mauris maximus vestibulum nisi a convallis. Vestibulum vitae placerat odio, ac venenatis tortor.</p>

      <p>Nam ornare sagittis velit id euismod. Aenean vitae velit sed augue sollicitudin ornare at vitae lorem. Cras nec nisi libero. Nullam quis congue mi, a sollicitudin arcu. Pellentesque dictum purus ligula, ut luctus tellus sagittis porta. Duis sit
        amet pellentesque tortor. Morbi sodales luctus nunc, sed dignissim eros consequat ac. Mauris tempus nibh diam, ac porta justo porttitor ac. Aliquam quis accumsan ante. Proin venenatis leo id rhoncus ornare. In hac habitasse platea dictumst. Nam
        sit amet nibh id velit euismod finibus. Cras sit amet blandit nulla. Donec auctor ligula a orci sodales molestie.</p>

    </div>

    <div class="chapter">
      <h2>Chapter 7</h2>
      <p>Sed sed efficitur enim, imperdiet lobortis justo. Fusce vulputate interdum aliquet. Sed commodo dapibus tellus nec vehicula. Donec a felis blandit, rutrum odio a, eleifend eros. Nullam quis dui massa. Nunc rutrum metus sit amet posuere consectetur.
        Cras sit amet suscipit velit. Nullam ac vulputate sem, quis euismod augue. Etiam viverra quam blandit, aliquet erat et, porta quam. Integer molestie nisl nunc, vitae pharetra dolor mollis in. Nulla sodales tortor justo, sed pulvinar felis iaculis
        efficitur. Ut et lacus non libero scelerisque vestibulum. Morbi velit urna, egestas ut diam ut, aliquet egestas augue. Vestibulum cursus, nibh ut sodales facilisis, eros ligula tincidunt orci, vel dapibus lorem ante varius eros. Quisque venenatis
        eget turpis eget varius. Donec sit amet dui tortor.</p>

      <p>Mauris non nunc id ligula dignissim egestas at non ligula. Mauris consequat convallis molestie. Integer mattis ac ligula volutpat posuere. Etiam accumsan orci sed velit suscipit, quis faucibus turpis dictum. Curabitur at viverra risus. Morbi gravida
        felis ut quam porta gravida. In eu pretium sem. Nullam ligula sapien, pharetra sit amet dignissim quis, sollicitudin ut metus. Nullam auctor iaculis nisi, non condimentum enim efficitur vel. Aliquam luctus feugiat neque.</p>
    </div>

  </div>
</div>

html {
  -webkit-font-smoothing: antialiased;
  font-family: 'Merriweather';
}

.test {
  position: fixed;
  top: 0;
  z-index: 99;
}

p, 
h1,
h2,
h3,
a {
  margin: 0;
  padding: 0
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1 {
  margin-top: 40px;
  font-size: 60px;
  color: #2C2C2F;
}

h2 {
  font-size: 28px;
  margin-bottom: 15px;
  margin-top: 45px;
  color: #2C2C2F;
}

p {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #2C2C2F;
}

.nav-wrap {
  top: 0;
  width: 140px;
  position: fixed;
  background-color: #BCBFC7;
  z-index: 2;
  
  .nav-text {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    background-color: white;
    box-sizing: border-box;
    padding: 20px 30px;
    mix-blend-mode: screen;
  }
  
  li {
    font-weight: 300;
    font-size: 50px;
    margin: 0;
    color: black;
    height: 20px;
    font-size: 16px;
    cursor: pointer;
    margin: 0;
    margin: 12px 0;
    box-sizing: border-box;
    line-height: 1;
  }
  
  .bg {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #CED1DB;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px 30px;
    
    .block {
      width: 100%;
      height: 20px;
      margin: 12px 0;
      position: relative;
      overflow: hidden;
      
      .block-inner {
        width: 100%;
        height: 100%;
        top: -100%;
        position: relative;
        background-color: #2C2C2F;
      }
    }
  }
}

.page-wrap {
  width: 100%;
  position: relative;
  display: inline-block;
  float: left;
  
  .grid {
    width: 600px;
    position: relative;
    margin: 0 auto;
    @media (max-width: 900px) {
      left: 80px;
      width: 400px;
    }
    
    .chapter {
      width: 100%;
      position: relative;
      display: inline-block;
    }
  }
}

$(document).ready(function(){
  var navWrap = $('.nav-wrap'),
    chapters = [],
    HEIGHT = $(window).height();

  $('.chapter').each(function(i){
    var title = $(this).find('h2').text();
    chapters[i] = {};
    chapters[i].obj = $(this);
    chapters[i].offset =       chapters[i].obj.offset().top;
    chapters[i].height = chapters[i].obj.height();
    navWrap.find('ul').append('<li>'+title+'</li>');
    navWrap.find('.bg').append('<div class="block"><div id="block-inner-'+i+'" class="block-inner"></div></div>');
    chapters[i].block = $('#block-inner-' + i);
  });

  function chapterScroll() {
    var scroll = $(window).scrollTop();

    for (var i = 0; i < chapters.length; i++) {
      var percentScrolled = ((scroll - (chapters[i].offset) + HEIGHT) / (chapters[i].height + HEIGHT) * 100) * 2;
          
      chapters[i].block.css('transform', 'translateY('+percentScrolled+'%)' );
    }
  window.requestAnimationFrame(chapterScroll);
  }

  $('li').on('click', function(){
    var chosen = $(this).index();
    
    $('html').animate({scrollTop:chapters[chosen].offset}, '500');
  });

  chapterScroll();
  
  $(window).on('resize', function(){
    HEIGHT = $(this).height();
  });
});