<header>
  <nav>
    <ul class="menu">
      <li><a href="#sec1" class="tab">Suscipit</a></li>
      <li><a href="#sec2" class="tab">Blanditiis</a></li>
      <li><a href="#sec3" class="tab">Numquam</a></li>
      <li><a href="#sec4" class="tab">Voluptatem</a></li>
      <li><a href="#sec5" class="tab">Ipsum</a></li>
    </ul>
    <div class="indicator">
      <div class="indicator-line"></div>
    </div>
  </nav>
</header>

<div class="wrapper">

  <section id="sec1" class="sec">
    <h3>Lorem ipsum dolor sit amet consectetur</h3>
    <p>Adipisicing elit. Mollitia delectus quia earum eaque, ratione quas, recusandae numquam corporis voluptates! Soluta mollitia consequuntur perferendis nulla saepe nostrum expedita cum cumque itaque eos autem laborum molestias distinctio repudiandae ratione, quibusdam nobis numquam iure animi, laboriosam optio praesentium hic. Rerum, laboriosam accusamus illo culpa perferendis optio, veniam tempore fugit cupiditate reiciendis, deleniti neque, nihil blanditiis quam ipsa debitis exercitationem dolores eveniet nam voluptas expedita molestias libero obcaecati asperiores? Repudiandae eius, ut excepturi! Ipsa corporis nemo, maiores voluptatibus voluptates itaque aliquam delectus expedita consequuntur hic distinctio sequi! Labore deserunt commodi, voluptate modi tempore. </p>
    <p>Similique tenetur cumque, laboriosam qui dicta iure fugit. Dolor officiis fuga quia sapiente perspiciatis, maiores sunt explicabo numquam dolorem eaque est voluptatum quas ratione adipisci, suscipit tempore, modi aliquid velit. Sit saepe quae, voluptatum, dolore nam similique doloremque possimus ratione ipsa suscipit corporis quibusdam laboriosam porro cum, impedit velit? Architecto dolores perferendis odio explicabo atque facere at et voluptatum pariatur excepturi aperiam optio expedita quisquam, culpa dolorum asperiores veritatis tenetur, cupiditate neque quibusdam deleniti sequi necessitatibus, laborum? Officiis debitis, perferendis placeat delectus temporibus repellat architecto natus ullam commodi dolorem amet quam hic, ducimus nesciunt! Quis rerum repellendus delectus, fugiat ea facere assumenda harum laborum illo corporis cum ipsum! Magni distinctio tempora quidem dicta, necessitatibus accusamus, porro illum fugiat hic officia ex sit aliquid veniam doloremque. Totam amet odit sit distinctio vel quia officia dolor fugiat beatae rerum, eum, rem facilis odio, quidem, laudantium ipsa aperiam ipsam consectetur optio tenetur. Tempore quaerat ratione explicabo provident omnis tenetur fugit velit neque itaque laudantium a laboriosam voluptates et maxime, necessitatibus in, inventore id eaque, quisquam ipsam! Beatae quasi, ex. Consequuntur quidem earum laudantium facilis ab. </p>
    <p>Quam sed veniam rerum, minima doloremque ipsam aut dicta iure eveniet laborum nesciunt fugit magni quod nulla, excepturi dolorem officiis rem. Ipsam molestiae ducimus aperiam ad praesentium dolores vitae, nam, voluptatum ea quis fugiat numquam, soluta at, dignissimos tempore dicta temporibus impedit quae eum inventore in. Consequatur aut deserunt rerum sint praesentium. Deserunt consequuntur necessitatibus, unde cupiditate ullam, molestias, natus maxime, atque consequatur iste magni. Quo aspernatur est voluptatum repellendus ex doloribus dignissimos, laudantium perferendis esse numquam et facilis odit error, voluptatem illo itaque magni tempora pariatur sed, ab voluptas.</p>
  </section>

  <section id="sec2" class="sec">
    <h3>Minima reprehenderit</h3>
    <p>Sit quibusdam eveniet nam quas quaerat unde obcaecati et ut sequi itaque placeat modi ipsam qui explicabo accusantium molestias libero, consequatur earum quae omnis est, quod. Nulla a, sapiente deleniti odit ipsum neque delectus earum perspiciatis eum, aperiam debitis eius esse ullam aliquid eligendi ea molestiae quia, recusandae dolores. Modi quisquam recusandae voluptatum eveniet porro vitae temporibus possimus veritatis atque consequatur molestias ducimus ad, aspernatur nisi at maiores sunt tenetur adipisci non. Eveniet neque, doloremque excepturi beatae omnis at doloribus illum cum fugiat rem in voluptatum unde nulla sit, eligendi quibusdam. Possimus facere saepe molestias ipsam ut quos asperiores est non at autem optio dolore fugit soluta doloremque voluptatum laboriosam voluptatem sequi porro exercitationem quisquam, delectus! Maiores commodi, reiciendis, nisi numquam molestiae quibusdam quisquam doloribus, in, doloremque culpa nesciunt molestias iste fugit! Alias illum, possimus ducimus accusantium temporibus aliquam dolorum! Sapiente molestiae veniam inventore labore deleniti. Odio est fugiat, praesentium excepturi! Expedita enim deleniti ipsa deserunt error ut possimus at sunt dolore dicta quae a facilis blanditiis eos pariatur corporis tenetur cumque officia consequuntur, nisi culpa quibusdam perferendis quod? Consequuntur, sunt, ipsam! Architecto animi ducimus qui distinctio, accusantium voluptatum dicta, amet hic illo esse veritatis vero tempore recusandae doloremque soluta quas nostrum alias ex dolores porro eaque adipisci non ipsa et. </p>
    <p>eleniti, iure. Excepturi consequuntur minima quaerat. Non dolore ratione doloremque veritatis, dignissimos quaerat, dicta facere hic eveniet, id doloribus! Eveniet ipsam consectetur iure? Ipsam suscipit quisquam quis praesentium ullam, dolores. Nulla enim, id! Inventore tenetur sit reiciendis, sunt libero sapiente soluta minus cum alias aut a, corporis veritatis. Error, perferendis. Quidem illum rem adipisci corporis, reprehenderit, dolorum distinctio aliquid ducimus tempore ex iure nemo nulla id minus culpa suscipit nostrum, laboriosam harum ipsum. Eveniet, minima beatae minus similique. Dolor amet vel illo voluptatum doloremque accusantium omnis laudantium, explicabo, ad maxime recusandae nemo. Ab odit harum omnis maiores, dolorem doloribus iste, explicabo, magni eligendi repellat accusamus! Explicabo similique maxime vel at distinctio cum reprehenderit nesciunt, architecto mollitia voluptatem veniam placeat laboriosam aspernatur consequatur dicta, fugit harum officia accusamus itaque temporibus natus nostrum quaerat ea! Odit distinctio, a officia nam sapiente ipsa odio placeat voluptatum perferendis quaerat veniam ducimus accusantium? Accusamus aliquam illo aut quaerat eligendi vitae facilis nostrum asperiores, atque incidunt quidem dolorum facere? Incidunt officiis voluptate modi accusamus inventore molestias nam, autem at porro dignissimos debitis quos iure nulla. Dolorum odio, id laboriosam distinctio. Inventore iste magnam perspiciatis repellat odit neque consequuntur fuga nostrum quam, nam hic id nisi repudiandae nihil quisquam perferendis eveniet, ipsa a saepe, minus labore doloribus iusto ullam dolor. Nostrum eveniet a magnam voluptates incidunt minima.</p>
  </section>

  <section id="sec3" class="sec">
    <h3>Ea totam doloribus quo sequi mollitia</h3>
    <p>Reprehenderit quos voluptates, at, tempore aperiam aut ad? Asperiores maxime officia saepe tenetur sint quae expedita omnis, excepturi necessitatibus cupiditate, amet explicabo unde dolorem et doloribus veritatis nemo consectetur blanditiis aut! Ipsa aliquam tempore quaerat ullam, veritatis consectetur soluta eius maiores perferendis atque quos eum in dolore est nam commodi fuga officiis velit aliquid, illum natus, ut sit vero, saepe? Recusandae nemo neque nihil earum debitis dignissimos unde placeat vel officia consequatur voluptate est voluptatem veniam, ex cum eos quam doloribus suscipit reprehenderit assumenda, esse atque alias quas fugit dolorum? Obcaecati similique illo odio totam in, dolores molestias corporis quis dolore ratione iusto natus? Vero libero, doloremque, soluta est repudiandae incidunt aut quasi qui. Blanditiis facilis, assumenda excepturi animi possimus optio et itaque cumque fugiat, soluta! Quibusdam quidem tempore fugiat excepturi ad aliquid consequuntur voluptatum quasi sapiente rem reiciendis soluta omnis aperiam beatae autem optio, iusto earum sunt, reprehenderit. Quos doloribus similique alias. Excepturi, dolorem. Recusandae, amet vel delectus. Voluptas itaque earum, adipisci dolorum amet eos quidem dolorem? Adipisci, perferendis, fugiat. Recusandae maiores voluptates minus, sequi sed nostrum deserunt velit provident atque porro quasi iusto, accusamus quibusdam consequuntur. Veritatis quisquam nihil ex accusamus, voluptatum nam animi fuga, iusto quo similique est cum quas, provident non suscipit amet nobis. Ex eligendi rem ullam, expedita! Aperiam minus totam neque ullam aspernatur nam quasi voluptatum veritatis ipsum doloribus, amet maxime aliquam? Alias nesciunt odit omnis animi quod, maiores ipsa! Repellendus, odit, facilis. </p>
    <p>Consequuntur aliquid quia earum illum dignissimos, accusamus atque, iure dolor minus, totam nostrum neque laudantium quasi praesentium assumenda inventore eveniet! Provident temporibus veritatis illum at nostrum, iusto non quam, eaque, asperiores quod facere esse ut cum dolores voluptate, aut sequi numquam nihil eveniet. Error assumenda illum, recusandae sequi? Eveniet hic accusantium, nisi unde doloribus molestias voluptas mollitia rerum, cum qui quos vitae animi voluptate voluptates quisquam distinctio, veniam ad. Repudiandae, rem, natus. Placeat voluptatibus molestiae totam vel aspernatur sapiente ab nostrum soluta illum fuga, in, necessitatibus rerum, mollitia itaque laborum ad accusamus maiores ipsum hic ullam numquam labore sed natus! Porro accusamus quam delectus, iure aut laudantium, earum recusandae inventore maiores ipsam aliquid voluptatum? Rem quisquam nemo error alias. Quod rem doloribus adipisci, suscipit possimus omnis. Nisi ex laudantium architecto natus praesentium ab libero inventore vero repellat a ipsa deserunt ipsum quis, enim, minus, iste amet odit illo. Voluptatem iste, veritatis, similique consequatur at saepe provident quod aliquid rem, perspiciatis illum minima aliquam repudiandae. Ea laudantium quia adipisci sit, porro itaque aliquam voluptates.</p>
  </section>

  <section id="sec4" class="sec">
    <h3>Veritatis quibusdam esse</h3>
    <p>Facere corrupti ea itaque eos magni labore eum a, neque voluptatibus impedit maxime, maiores vitae officia culpa alias debitis reiciendis! Minus dolore, sequi assumenda, alias tempore suscipit esse temporibus repellat nostrum, odit quia voluptatum obcaecati dolores eos cumque aliquam dolorem fugiat soluta. Soluta fuga error, nostrum quas. Nihil perspiciatis temporibus labore velit saepe fugiat repudiandae magnam assumenda! Rem magni, libero accusantium laborum cum aliquid earum dolorem repellat quas magnam velit asperiores placeat ea odio expedita consequuntur quisquam, sapiente reiciendis esse iusto mollitia unde incidunt! Provident veniam laudantium similique amet velit neque consequatur officia at ex facilis, veritatis repellat odio, qui vitae possimus facere! Blanditiis animi, fuga cumque pariatur reiciendis repellendus, doloremque nemo vel inventore earum non quo tenetur explicabo similique dignissimos neque, dolores obcaecati sint adipisci odit ipsam! Saepe modi et, repudiandae veritatis voluptatibus necessitatibus officiis autem eligendi, sequi consequuntur sapiente temporibus alias nesciunt ex ipsa, nobis cumque ea facere eos dicta. </p>
    <p>Ullam eaque sapiente dolor recusandae laboriosam eos repudiandae ad ab obcaecati deleniti molestias nesciunt autem optio placeat velit dignissimos, voluptatum cumque saepe mollitia perferendis numquam. Voluptate expedita molestias alias ea odit eveniet necessitatibus dolorum officiis, rem eos saepe accusamus temporibus velit. Quo doloremque natus quos odio tempore fugit sit, ullam ipsum autem. Nemo libero fugit qui iusto saepe iure, porro minus. Ea dolore ipsum cumque, aspernatur est reprehenderit reiciendis minus delectus laudantium fugiat nostrum ratione dolorum veritatis debitis quo iusto, eius eveniet perferendis labore? Ad est assumenda nisi, earum necessitatibus obcaecati ipsam autem repudiandae. Eaque est facere qui nobis quisquam, mollitia soluta. Numquam sequi temporibus doloribus nobis officia. Praesentium fugit dolor inventore eaque, dolores voluptas quos facere, nam animi enim? Rerum, voluptatibus dolore iusto animi, inventore optio? Mollitia minus deleniti blanditiis dolorum facere ab est, sed, magnam sapiente nulla sint magni ipsam odio rerum ratione id, omnis molestias. Ea, sint, libero. Aspernatur iure explicabo minima, fugit totam id repellat quo cum laudantium, sed excepturi natus eos maiores non, debitis autem voluptatem error blanditiis. Modi ad esse aspernatur saepe nesciunt nemo cupiditate, aperiam eveniet ipsam consectetur, sequi, repudiandae sit maiores sapiente eum quo temporibus. Ducimus quo laudantium perspiciatis aliquam fuga dolorum sapiente quasi possimus, doloribus impedit repellendus rem eaque quaerat provident, et earum. A quidem beatae impedit dolore eaque labore nam deleniti debitis reiciendis sit porro, eligendi neque sed alias, enim minima nesciunt libero dicta! Deleniti praesentium, beatae possimus molestiae enim quos sint nam voluptates velit autem et exercitationem commodi reprehenderit dignissimos tempora voluptatum vitae maiores accusantium voluptate fugit. Architecto iste dolorum porro molestias possimus sit sequi, nam maxime veritatis est soluta deserunt cupiditate, aliquam neque distinctio consequuntur dicta officiis in sapiente odio eum. Illum, magni sunt. Consequuntur distinctio maiores quas perspiciatis, modi. Nostrum, rerum repellat asperiores et, deleniti fuga quis ea eos vero sit facilis quos quaerat officiis, eveniet numquam nobis ipsa quibusdam, magnam nesciunt qui adipisci! Neque, fugit minus minima in molestias error fugiat consectetur ab unde obcaecati adipisci voluptatem omnis ipsam illum et nulla consequuntur illo voluptas corrupti laboriosam, assumenda id. Voluptate impedit, odit distinctio corrupti sequi rerum odio tempore sed possimus.</p>
  </section>

  <section id="sec5" class="sec">
    <h3>Veniam accusamus corporis</h3>
    <p>Cupiditate magnam error perferendis dolorum sunt, eaque iure quasi voluptatem, doloremque fugiat asperiores sint itaque rerum culpa, inventore. Sunt autem itaque iste rem libero, nihil eligendi, deleniti repudiandae alias placeat, voluptatibus illo porro? Pariatur modi iure quo, incidunt autem aperiam natus quaerat. Vel provident ad, repellendus in natus. Dolore possimus minus voluptatum quia unde porro, mollitia deserunt soluta cupiditate hic, earum voluptatibus reprehenderit veniam fuga, ipsam temporibus iure quae? Porro blanditiis maiores labore, excepturi beatae aspernatur obcaecati laudantium ex provident temporibus praesentium adipisci perspiciatis voluptates optio ullam molestias sunt non odit. Culpa aliquid repellat perspiciatis ratione eum doloribus natus, ex eveniet. Ex ullam quasi repellendus nisi, aliquid tempora quae dolores provident cum dignissimos eius unde consequatur ipsa magnam nobis saepe laboriosam placeat minus error tenetur hic esse suscipit blanditiis reprehenderit. </p>
    <p>At, voluptatum quia labore cupiditate beatae deserunt fuga ea aut tempora perferendis quo cum facilis, explicabo. Deserunt dolor ipsam, doloremque blanditiis sunt ullam reprehenderit aperiam magnam veniam quo atque quasi, nisi iure fugiat. Consequatur possimus dicta fugiat voluptates architecto, officia exercitationem laudantium ex dolores nihil, illum quo eveniet mollitia placeat, quod expedita. Dolores odit nisi mollitia ipsum blanditiis, harum, quaerat deserunt, temporibus eligendi, eum cupiditate voluptates consequuntur voluptatem dolore porro iste quos! Ea quia, iusto itaque obcaecati sunt ipsam rerum soluta iste molestiae inventore aperiam labore sed nihil aut nostrum voluptatem aliquam, saepe quos praesentium consequatur! Odio quia nemo aliquam vitae quibusdam porro repellat officiis inventore. Officiis deserunt ab labore inventore consectetur facere dolor iusto, rem fugit? Impedit eaque quae consequatur voluptatibus, ipsa praesentium, ullam nemo animi sunt repellendus neque beatae cum commodi veniam vel harum eum! Minus enim, perferendis dolor, voluptatibus neque vero sapiente quae. Voluptatum est fugiat nihil voluptate odio! Ullam temporibus ad excepturi neque itaque vitae illum! Tempora quisquam sunt animi dignissimos veniam excepturi veritatis consequatur! Earum commodi, quae pariatur, suscipit hic deleniti dolores magnam voluptatem distinctio. Aspernatur eos, eum beatae. Expedita optio est voluptate placeat consequatur odit dignissimos, commodi, assumenda porro, rem minus recusandae animi! Dolorem maxime architecto nesciunt inventore tenetur hic expedita mollitia fugiat error, totam quod modi impedit eveniet suscipit facilis ducimus doloribus aliquam cupiditate nemo ipsam eum veniam minus consequatur. Adipisci impedit veritatis, velit expedita numquam ipsam aut? Delectus doloremque error soluta accusantium magni culpa perferendis dignissimos voluptate totam aperiam earum vitae, reiciendis quas reprehenderit dolorem enim facere obcaecati cumque repudiandae eligendi aut sed non! Obcaecati impedit delectus debitis cupiditate, iure, nobis earum inventore quaerat possimus rerum fugiat ipsa et corporis quas placeat reiciendis illo porro soluta vitae assumenda illum, voluptatem voluptates perspiciatis, nisi minima. Qui non, perspiciatis nisi assumenda, eos ab. Rerum magni earum, voluptatibus eos fuga repudiandae odit sunt. Alias vel, eligendi, sequi sapiente rerum quaerat quod provident impedit perferendis. Dicta, cumque a placeat odit debitis earum officia eum, ipsam illum ullam odio corrupti explicabo sed dolorum aperiam quaerat. </p>
    <p>Iste suscipit quas quis, architecto ad omnis veniam ipsa ab accusamus quo eveniet vel. Adipisci aperiam est iste similique beatae, inventore officia nulla? Repudiandae cupiditate accusamus fuga soluta explicabo. Eum, neque similique doloremque beatae architecto distinctio dolorum aspernatur debitis porro minus iste, esse explicabo ipsam ea dolores. Nisi laudantium pariatur cumque, ipsum laboriosam quisquam dolor doloremque aliquid. Maiores nam tempora consectetur, delectus reiciendis ipsam doloribus illum minus similique, at facilis eum cum mollitia dicta facere illo porro odit. Nesciunt eligendi ut nostrum, rerum blanditiis tempore esse quasi facilis est veniam aspernatur in reiciendis quia nemo suscipit a iusto, praesentium odio nihil ullam explicabo laborum tempora fugit. Maiores quasi provident culpa inventore quia dolorem expedita iure similique optio quis tempora dolor saepe dolore, obcaecati in ex perferendis, sunt adipisci dolorum, excepturi! Optio asperiores repudiandae atque, cum ipsa suscipit, inventore voluptas praesentium minus nobis, nesciunt. Repudiandae nobis iste, veritatis non suscipit, totam in at! Consequatur in quis, quod magni molestiae rerum veritatis reprehenderit deleniti veniam deserunt laborum excepturi ad eius, accusamus soluta facere, repudiandae? Aliquid molestiae earum iste quasi dignissimos, perspiciatis veniam maiores, optio ipsam ratione ab maxime nostrum deleniti totam nisi consequatur. Similique ea mollitia excepturi deleniti quo culpa esse.</p>
  </section>

</div>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600" rel="stylesheet">

/*
===================
===================
Global
===================
===================
*/
:root {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #616161;
  background: #F5F5F5;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/*
===================
===================
Nav
===================
===================
*/
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #FFCE54;
  z-index: 1;
}

.indicator {
  position: relative;
  width: 100%;
  height: 3px;
  background: #F6BB42;
}

.indicator-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background: #FDE3A7;
  transition:
    width ease .3s,
    left cubic-bezier(.4,.95,.5,1.5) .5s;
}

.menu {
  padding: 0;
  list-style: none;
  text-align: center;
}

.menu li {
  display: inline-block;
}

.tab {
  padding: 12px 8px;
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: .025em;
  text-decoration: none;
}

.active-tab {
  color: #FDE3A7;
}

/*
===================
===================
Content
===================
===================
*/
.sec {
  position: relative;
  width: 90%;
  max-width: 680px;
  margin: 80px auto;
  padding: 40px;
  background: #ffffff;
  box-shadow:
    0 8px 16px rgba(50,50,90,0.1),
    0 2px 7px rgba(0,0,0,0.07);
}

.sec:before,
.sec:after {
  content: "";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  background: #FFCE54;
  z-index: -1;
}

.sec:before {
  width: 40%;
  max-width: 200px;
  height: 13px;
  bottom: -13px;
}

.sec:after {
  width: 50px;
  height: 50px;
  bottom: -25px;
  border-radius: 25px;
}

p {
  font-size: .9em;
}

h3 {
  padding-bottom: 20px;
  letter-spacing: .25em;
  color: #FDE3A7;
  text-align: center;
  border-bottom: 1px solid #DDDDDD;
}

/* Drop cap */
p:nth-child(2):first-letter {
  float: left;
  font-size: 3.2em;
  margin-right: 15px;
  line-height: 1;
  color: #F6BB42;
}

/*
===============================================================

Hi! Welcome to my little playground!

My name is Tobias Bogliolo. 'Open source' by default and always 'responsive',
I'm a publicist, visual designer and frontend developer based in Barcelona. 

Here you will find some of my personal experiments. Sometimes usefull,
sometimes simply for fun. You are free to use them for whatever you want 
but I would appreciate an attribution from my work. I hope you enjoy it.

===============================================================
*/
//Page scrolling snippet (http://codepen.io/tobiasdev/pen/qNdrBZ):
$(function(){
  $('a[href^="#"]:not([href="#"])').click(function(){
    $("html, body").animate({
      //IMPORTANT: One extra pixel to pass the line!
      scrollTop: $($(this).attr("href")).position().top + 1
    }, 500);
    return false;
  });
});

//Set line width and position:
function setLine(tab){
  var tabWidth = $(tab).outerWidth();
  var tabPos = $(tab).position();
  $(".indicator-line").css({
    "width": tabWidth,
    "left": tabPos.left
  });
};

//Line move:
function lineMove(){
  $('.tab').each(function (){
    var scrollPos = $(document).scrollTop();
    var linkRef = $($(this).attr("href"));
    var refPos = linkRef.position().top;
    var refHeight = linkRef.height();
    if(refPos <= scrollPos && refPos + refHeight > scrollPos){
      $('.tab').removeClass("active-tab");
      $(this).addClass("active-tab");
      setLine(this);
    };
  });
};

//Run function:
$(document).ready(function(){
  //On document load:
  lineMove();
  //On window scroll or resize:
  $(window).on("scroll resize", lineMove);
});