JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://guidobouman.github.io/jquery-panelsnap/jquery.panelSnap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
   <header>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

              <a class="navbar-brand" href="index.php">
               <p>LOGO</p>
              </a>
            </div>     

            <div class="collapse navbar-collapse" id="navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right menu">
                <li><a href="empresa.php">Empresa</a></li>
                <li class="divider"></li>
                <li><a href="solucao.php">Soluções</a></li>
                <li class="divider"></li>
                <li><a href="servicos.php">Centro de Serviços</a></li>
                <li class="divider"></li>
                <li><a href="carreira.php">Carreira</a></li>
                <li class="divider"></li>
                <li><a href="#">Portal do Cliente</a></li>
                <li class="divider"></li>
                <li><a href="contato.php">Contato</a></li>                   
              </ul>
           </div>
        </div> <!--/container--> 
      </nav>
    </header>  


<section class="bg-1">
    <div class="row">
      <div class="container">
        <div class="col-md-12">
            <h1>Mussum ipsum cacilds, vidis litro abertis</h1>
            <p>Mussum ipsum cacilds, vidis litro abertis....

CSS

body {padding-top:50px;}


section{
  overflow: hidden;
  width: 100%; 
  height: 100%;
  min-height:100vh;
}

.panels.offset section{
  height: calc(100% - 5px);
}

h1,p,i{
    color:#fff;
    text-align:center;
}

i{
  font-size:3em !important; 
   padding-left:120px;
    padding-top:30px;
}

.bg-1{
    background:#F68A2F url('http://codyhouse.co/demo/alternate-fixed-scroll-background/img/cd-background-1.jpg') repeat center center;
    background-size: cover;
    background-attachment: fixed; 
}


.bg-2{
    background:#F68A2F url('http://codyhouse.co/demo/alternate-fixed-scroll-background/img/cd-background-2.jpg') repeat center center;
    background-size: cover;
    background-attachment: fixed; 
}


.bg-3{
    background:#F68A2F url('http://codyhouse.co/demo/alternate-fixed-scroll-background/img/cd-background-3.jpg') repeat center center;
	background-size: cover;
    background-attachment: fixed; 
}


.bg-4{
    background:#F68A2F url('http://codyhouse.co/demo/alternate-fixed-scroll-background/img/cd-background-4.jpg') repeat center center;
    background-size: cover;
    background-attachment: fixed;  
}

JavaScript

$('body').panelSnap({
    offset: 50,
    directionThreshold: 50,
        keyboardNavigation: {
            enabled: true,
            nextPanelKey: 39,
            previousPanelKey: 37,
            wrapAround: false
          }
    });