<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sticky Nav</title>

  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <header class="sticky-nav-header">
    <nav class="sticky-nav-menu">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <article class="sticky-nav-article">
    <p>Marshmallow dragée liquorice sweet roll jelly. Tart bear claw donut sweet pastry croissant chupa chups. Topping chocolate cake pie. Toffee danish liquorice. Muffin candy biscuit chupa chups candy cotton candy gummies sweet roll. Wafer chocolate jelly beans macaroon jelly-o gingerbread sugar plum. Danish chocolate bar apple pie biscuit candy macaroon cake gummi bears. Cookie brownie cake caramels gummies chocolate tiramisu toffee cookie. Powder bear claw tiramisu cookie soufflé. Lollipop candy canes soufflé sweet. Dragée danish tart gummi bears marshmallow sugar plum tiramisu oat cake. Oat cake jelly halvah dragée cookie. Biscuit lollipop gingerbread gingerbread.</p>

    <p>Liquorice candy bear claw jelly-o brownie wafer. Candy canes cheesecake bear claw topping sweet. Wafer dessert liquorice jujubes sweet lollipop pudding jelly beans tart. Lollipop jelly beans toffee gingerbread jelly beans. Gingerbread wafer jelly-o. Bonbon marshmallow pie croissant jelly-o brownie chupa chups candy canes macaroon. Cookie oat cake gummies. Cupcake tart croissant. Ice cream tiramisu caramels tootsie roll jelly wafer macaroon sweet roll chocolate bar. Marzipan dessert cupcake. Dessert cake topping marzipan cotton candy. Powder powder lemon drops cake gummi bears topping.</p>

    <p>Caramels marzipan cotton candy powder biscuit chupa chups sesame snaps. Cookie jelly-o dessert jelly beans jujubes oat cake chocolate cake. Apple pie jujubes macaroon candy. Gummi bears fruitcake ice cream apple pie oat cake liquorice cotton candy. Cookie cotton candy chupa chups macaroon marshmallow macaroon oat cake tootsie roll. Tart sweet roll fruitcake tiramisu. Dragée fruitcake fruitcake chupa chups ice cream candy canes. Bonbon tootsie roll jujubes. Bonbon biscuit lemon drops. Jelly beans gummies chocolate wafer bonbon muffin brownie sweet jelly beans. Gummies topping jujubes toffee dessert sweet sugar plum danish jelly beans. Dragée biscuit candy canes halvah chupa chups.</p>

    <p>Toffee chupa chups macaroon danish icing wafer sweet roll pudding. Halvah candy canes jelly-o marzipan oat cake marzipan tart muffin marshmallow. Danish pastry cheesecake caramels danish lemon drops pastry lemon drops cupcake. Croissant soufflé marzipan tart pastry jujubes. Caramels cheesecake marshmallow bonbon gingerbread apple pie lollipop. Oat cake bear claw bear claw wafer. Jujubes donut sugar plum powder cupcake. Jelly beans jujubes chocolate bar. Chocolate jelly pie gummies. Pudding sweet roll powder liquorice soufflé dragée. Jelly beans cheesecake apple pie lemon drops. Dessert tart candy danish jelly-o. Donut biscuit toffee. Bonbon gummies lollipop chocolate cake tootsie roll pastry.</p>

    <p>Bear claw cotton candy cake candy lemon drops. Chocolate cake sugar plum bear claw bear claw chocolate bar croissant bonbon toffee halvah. Bear claw gingerbread jujubes apple pie. Halvah pudding biscuit candy caramels. Sweet cake dessert lollipop icing sweet roll. Gummi bears pudding topping marshmallow. Halvah marshmallow sweet roll soufflé lollipop pie jelly-o. Candy cupcake chupa chups cotton candy liquorice apple pie dragée jelly-o. Marshmallow muffin candy fruitcake candy canes chocolate cake cake marzipan. Soufflé chocolate bar liquorice marzipan caramels chocolate jelly beans apple pie cotton candy. Pastry marshmallow marzipan candy canes croissant toffee jujubes. Macaroon cotton candy macaroon pie muffin chocolate cake lollipop sugar plum chupa chups.</p>

    <p>Jelly-o pie gummies cake apple pie chocolate bar chocolate bar sweet. Soufflé gummies apple pie dessert sesame snaps pudding danish soufflé. Pudding candy canes chocolate gummies. Apple pie sweet roll danish bear claw marzipan jelly. Chocolate sweet candy jelly beans. Cupcake jelly beans pudding. Liquorice liquorice cheesecake jujubes bear claw. Tootsie roll sugar plum jujubes muffin lemon drops. Toffee muffin lemon drops cotton candy soufflé sesame snaps chocolate biscuit. Jelly candy topping chocolate bar cake candy canes croissant chocolate cake. Gingerbread ice cream pastry chocolate cake icing marzipan brownie cotton candy. Tootsie roll jelly dragée wafer.</p>

    <p>Jelly beans danish fruitcake biscuit macaroon. Tiramisu sesame snaps oat cake pudding sweet brownie lemon drops. Apple pie cheesecake muffin bonbon. Icing sweet roll liquorice macaroon tart bonbon. Topping danish macaroon ice cream cookie. Candy canes candy pastry halvah cookie. Apple pie wafer sweet dragée candy canes powder donut. Jujubes tiramisu powder jelly marzipan cookie sweet roll bear claw dessert. Soufflé sesame snaps gingerbread candy canes macaroon marshmallow ice cream. Lollipop soufflé donut wafer danish. Sweet cake caramels candy toffee soufflé icing. Sesame snaps chocolate bar gingerbread liquorice sweet roll. Jujubes pudding chocolate muffin danish jelly-o. Fruitcake jelly beans jelly beans carrot cake.</p>

    <p>Topping cookie dessert cake brownie muffin cheesecake candy canes bear claw. Apple pie candy canes cookie cheesecake lollipop. Candy canes jelly-o marshmallow macaroon sweet ice cream wafer. Powder oat cake sugar plum. Soufflé chocolate cake jelly-o. Cake caramels tiramisu apple pie ice cream. Wafer jelly beans gummies jelly-o jelly-o caramels sweet roll marshmallow tiramisu. Cookie jujubes sugar plum sesame snaps pastry marzipan lemon drops gummi bears sugar plum. Jelly-o sweet roll jujubes tiramisu dessert cotton candy sesame snaps topping marshmallow. Sweet roll cake chocolate cake bear claw apple pie. Fruitcake jelly beans cheesecake icing lemon drops fruitcake powder. Sweet sugar plum tootsie roll chocolate bar carrot cake carrot cake ice cream jujubes powder. Halvah powder muffin cupcake jelly topping dessert.</p>

    <p>Sesame snaps powder bear claw sugar plum ice cream wafer jelly beans chocolate bar. Icing cake jelly chocolate dragée muffin. Jelly halvah marzipan jelly. Sugar plum gummi bears chocolate bar toffee jelly cake icing gummi bears carrot cake. Jujubes topping sugar plum bonbon dragée sugar plum. Danish tart apple pie cheesecake brownie topping danish lemon drops marzipan. Caramels cake cotton candy. Donut topping sugar plum cheesecake candy bear claw soufflé bonbon. Jelly croissant pie. Halvah bear claw jelly beans jelly cake candy canes. Jelly danish jelly-o marshmallow. Cupcake chocolate bar soufflé gummi bears biscuit liquorice lemon drops apple pie caramels. Icing jelly beans donut tiramisu chocolate bar lemon drops.</p>

    <p>Brownie sugar plum ice cream gummi bears carrot cake icing tootsie roll. Sweet roll bonbon soufflé sweet dessert dessert cheesecake topping. Cupcake sesame snaps caramels apple pie gummies tootsie roll sesame snaps. Cupcake chocolate bar marzipan icing cotton candy. Croissant toffee bonbon bonbon soufflé. Cheesecake sesame snaps donut sugar plum apple pie oat cake jelly tart tiramisu. Danish powder chupa chups. Sweet roll donut chocolate cake jelly-o tiramisu. Bonbon gingerbread muffin liquorice pastry jelly-o sesame snaps pudding lollipop. Apple pie jujubes pie cotton candy halvah chocolate bar cookie icing. Icing powder cake caramels. Dragée cookie fruitcake chocolate cake apple pie. Gingerbread gummies toffee dragée dessert sweet gingerbread toffee. Sweet roll muffin marshmallow cookie jujubes jelly-o sweet roll sweet chocolate cake.</p>

    <p>Cake cake chupa chups muffin cotton candy sesame snaps topping. Wafer gingerbread candy canes cotton candy. Cupcake jelly-o sweet roll jujubes. Cotton candy bear claw chupa chups lollipop fruitcake chocolate jujubes cookie. Powder candy canes candy halvah liquorice bonbon chocolate cake croissant. Cotton candy marshmallow gummies sweet. Oat cake sugar plum lollipop tiramisu carrot cake halvah. Jelly beans donut biscuit donut jelly bonbon muffin. Pastry gingerbread caramels cake liquorice sweet roll gummi bears pastry cookie. Cupcake soufflé macaroon powder chocolate jelly soufflé. Tootsie roll halvah pie sugar plum cake lollipop biscuit. Oat cake jelly beans pudding cupcake candy ice cream jujubes pie chocolate cake. Cotton candy icing sweet cake candy bonbon sugar plum croissant halvah.</p>

    <p>Candy canes sweet roll danish lemon drops jelly. Danish brownie croissant sweet roll marshmallow gingerbread chocolate bar biscuit. Pudding tootsie roll carrot cake. Toffee marshmallow halvah chocolate bar jelly beans. Apple pie chocolate biscuit pie liquorice chupa chups caramels bear claw. Brownie cotton candy cupcake gummies. Pastry donut bear claw sesame snaps ice cream apple pie. Pudding pastry apple pie sugar plum muffin chocolate bar apple pie carrot cake. Dessert liquorice chupa chups danish sesame snaps topping jelly. Biscuit brownie carrot cake jelly-o toffee cake jelly. Oat cake chocolate oat cake liquorice donut cheesecake sugar plum pudding. Lollipop pastry cake croissant gingerbread. Candy jujubes cookie topping jujubes croissant. Fruitcake gummi bears sesame snaps muffin carrot cake sweet roll.</p>

    <p>Chocolate cake sweet candy marzipan biscuit cupcake pudding. Caramels gummi bears candy canes pudding chocolate bar pie apple pie. Cotton candy bear claw cake. Biscuit chocolate bar pastry. Pie apple pie cookie. Marshmallow sesame snaps muffin wafer gummies. Danish lollipop chupa chups cheesecake sesame snaps. Jelly beans cupcake gummies jelly beans biscuit gummi bears. Jujubes gummies marzipan marshmallow. Icing chupa chups lemon drops brownie gummies. Marzipan dessert lollipop caramels toffee bear claw pastry. Pastry gummi bears powder soufflé.</p>

    <p>Bonbon chocolate bar chocolate jelly beans cookie caramels chocolate cake. Candy canes dessert muffin chupa chups. Biscuit pie pudding candy tiramisu sugar plum. Topping macaroon tootsie roll topping oat cake jelly. Tart liquorice bear claw apple pie candy cheesecake chocolate cake chocolate bar. Muffin topping pudding. Halvah apple pie chocolate cake brownie lollipop. Chocolate cake oat cake jelly-o biscuit lemon drops. Chocolate biscuit caramels bear claw sugar plum sugar plum cake pastry tiramisu. Brownie jelly-o oat cake macaroon fruitcake cake. Cake chocolate cake tiramisu gummi bears halvah cookie tart. Gummi bears cake gingerbread pudding marzipan jelly-o jujubes.</p>

    <p>Lemon drops jelly lollipop powder lemon drops. Fruitcake brownie pastry dessert tiramisu candy canes. Fruitcake apple pie jelly beans gummi bears wafer pie. Marshmallow wafer dragée lollipop sweet roll. Jelly beans ice cream biscuit sesame snaps cookie cookie wafer. Caramels cupcake halvah gummies donut bear claw carrot cake. Muffin biscuit brownie icing muffin muffin liquorice pudding. Candy cupcake candy. Tart wafer chocolate bar carrot cake lemon drops cheesecake gummi bears ice cream. Donut sesame snaps marzipan pastry. Soufflé liquorice biscuit jujubes cupcake jelly-o halvah dessert carrot cake. Gummies oat cake donut marshmallow ice cream tiramisu.</p>
  </article>

  <script src="./scripts.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
}

.sticky-nav-header {
  height: 450px;
  width: 100vw;
  display: flex;
  align-items: flex-end;
  background: url('img/projects/javascript30/sticky-nav/bg.jpg');
  background-size: cover;
}

.sticky-nav-menu {
  background: #387963;
  top: auto;
  position: relative;
  width: 100vw;
  height: 80px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 5px rgba(0,0,0,.1)
}

.sticky-nav-menu.fixed {
  top: 0;
  position: fixed;
}

.sticky-nav-menu a {
  width: 90px;
  text-align: center;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  margin-right: 50px;
  border-radius: 5px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.sticky-nav-menu a:last-child {
  margin-right: 0;
}

.sticky-nav-article {
  width: 750px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  padding: 60px;
  margin: 70px 0;
  text-align: justify;
}

.sticky-nav-article p {
  margin-bottom: 20px;
}

@media (max-width: 650px) {
  .sticky-nav-header {
    height: 270px;
    background-position: 0 -100px;
  }

  .sticky-nav-article {
    width: 90vw;
    padding: 50px;
    margin: 30px 0;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  .sticky-nav-header { background-position: 0 -80px; }
  .sticky-nav-article { width: 80vw; }
}

@media (min-width: 901px) and (max-width: 1100px) { .sticky-nav-header { background-position: 0 -190px; } }
@media (min-width: 1101px) { .sticky-nav-header { background-position: 0 -310px; } }
let header = document.querySelector('.sticky-nav-header'),
    menu = document.querySelector('.sticky-nav-menu');

window.addEventListener('scroll', debounce(handleNav));

function handleNav(e) {
  let isAtTop = header.offsetHeight - menu.offsetHeight - window.scrollY < 0,
      method = isAtTop ? 'add' : 'remove';

  menu.classList[method]('fixed');
}

function debounce(laFonction, wait = 15, immediate = true) {
  let timeout;

  return function() {
    let context = this, args = arguments;

    let later = function() {
      timeout = null;
      !immediate && laFonction.apply(context, args);
    };

    let callNow = immediate && !timeout;

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);

    callNow && laFonction.apply(context, args);
  }
}