Страница прокрутки сайта с помощью CSS

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js'></script>

<header>
  <div class="header-top clearfix">
  <h1 class="l-left"><a href="#firstSection">ZORNET.RU</a></h1>
  <a class="l-right toggle-menu" href="#">
  <i></i>
  <i></i>
  <i></i>
  </a>
  </div>

  <nav class="hide">
  <ul id="menu">
  <li data-menuanchor="firstSection">
  <a href="#firstSection" title="First Section">Категория №1</a>
  </li>
  <li data-menuanchor="secondSection">
  <a href="#secondSection" title="Second Section">Категория №2</a>
  </li>
  <li data-menuanchor="thirdSection">
  <a href="#thirdSection" title="Second Section">Категория №3</a>
  </li>
  <li data-menuanchor="fourthSection">
  <a href="#fourthSection" title="Fourth Section">Категория №4</a>
  </li>
  <li data-menuanchor="fifthSection">
  <a href="#fifthSection" title="First Slide">Категория №5</a>
  </li>
  </ul>
  </nav>
</header>

<div id="fullpage">
  <section class="vertical-scrolling">
  <h2>#1</h2>
  <h3>ZorNet.Ru — сайт для вебмастера</h3>
  </section>
  <section class="vertical-scrolling">
  <h2>#2</h2>
  <h3>Категория скрипты для uCoz</h3>
  </section>
  <section class="vertical-scrolling">
  <h2>#3</h2>
  <h3>В категорий шаблоны для uCoz</h3>
  </section>
  <section class="vertical-scrolling">
  <h2>#4</h2>  
  <h3>Всплывающие окна Ajax</h3>
  </section>
  <section class="vertical-scrolling">
  <h2>#5</h2>  
  <h3>Не может быть сайт без навигаций</h3>
  </section>
</div>

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);
* {
  margin: 0;
  padding: 0;
  font-family: 'Alegreya Sans', Arial, sans-serif;
  text-transform: uppercase;
}
html {
  font-size: 62.5%;
}
body {
  color: black;
  letter-spacing: .18em;
}
a {
  text-decoration: none;
  color: white;
}
ul, li {
  list-style-type: none;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.l-left {
  float: left;
}
.l-right {
  float: right;
}
.end {
  margin-top: 30px;
  font-size: 3em;
  font-weight: bold;
  opacity: 0;
  -webkit-transform: translateY(300px);
  transform: translateY(300px);
  transition: opacity, -webkit-transform 1s;
  transition: opacity, transform 1s;
  transition: opacity, transform 1s, -webkit-transform 1s;
  transition-delay: 1s;
}
.header-top {
  background: rgba(0, 47, 77, .3);
  height: 70px;
  padding: 0 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 12;
  box-sizing: border-box;
}
h1 {
  line-height: 70px;
  height: 70px;
}
h1 a {
  display: block;
  padding: 0 10px;
}
.toggle-menu {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  top: 10px;
}
.toggle-menu i {
  position: absolute;
  display: block;
  height: 2px;
  background: white;
  width: 30px;
  left: 10px;
  transition: all .3s;
}
.toggle-menu i:nth-child(1) {
  top: 16px;
}
.toggle-menu i:nth-child(2) {
  top: 24px;
}
.toggle-menu i:nth-child(3) {
  top: 32px;
}
.open-menu i:nth-child(1) {
  top: 25px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
  background: transparent;
}
.open-menu i:nth-child(3) {
  top: 25px;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}
nav {
  height: 0;
  opacity: 0;
  box-sizing: border-box;
  background: rgba(0, 47, 77, .25);
  position: fixed;
  top: 70px;
  width: 100%;
  transition: all 1s;
}
.open-menu ~ nav {
  opacity: 1;
  padding: 80px 0;
  z-index: 15;
  height: calc(90vh - 70px);
}
nav ul {
  padding: 0 10px;
  display: flex;
}
nav li {
  flex: 1;
}
nav li a {
  font-size: 2em;
  display: block;
  padding: 30px;
  text-align: center;
  transition: background .3s;
}
nav li a {
  background: #ff4b4b;
  margin-left: 20px;
}
nav li a:hover {
  background: #212121;
}
section {  
  text-align: center;
}
h2 {
  font-size: 4em;
  margin-bottom: 20px;
}
h3 {
  font-weight: 300;
  font-size: 2.8em;
}
#fp-nav ul li a span,  
.fp-slidesNav ul li a span {
  background: white;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,  
.fp-slidesNav ul li a.active span,  
#fp-nav ul li:hover a.active span,  
.fp-slidesNav ul li:hover a.active span {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: transparent;
  box-sizing: border-box;
  border: 2px solid #212121;
}

@media screen and (max-width: 767px) {
  nav ul {
  flex-direction: column;
  }

  nav li {
  margin-top: 1px;
  }
   
  nav li a {
  font-size: 1.5em;
  }
   
  .scroll-icon {
  display: none;
  }
}

@media screen and (max-width: 400px) {
  html {
  font-size: 50%;
  }
   
  .open-menu ~ nav {
  padding: 20px 0;
  }

  nav li a {
  padding: 3px;
  }
}
JS

var $header_top = $('.header-top');
var $nav = $('nav');

$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});

$('#fullpage').fullpage({
  sectionsColor: ['#3dcfa1', '#348899', '#ff8b20', '#ff5757', '#ffd03c'],
  sectionSelector: '.vertical-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,
  anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'],
  menu: '#menu',

  afterLoad: function(anchorLink, index) {
  $header_top.css('background', 'rgba(0, 47, 77, .3)');
  $nav.css('background', 'rgba(0, 47, 77, .25)');
  if (index == 5) {
  $('#fp-nav').hide();
  }
  },

  onLeave: function(index, nextIndex, direction) {
  if(index == 5) {
  $('#fp-nav').show();
  }
  },

});