<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="box1" class="home"> <h1></h1>This is heading</h1> </div> <!-- /box1 --> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main"> <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="#"></a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-main"> <ul class="nav navbar-nav navbar-right"> <li><a href="javascript:void(0);">Home</a></li> <li><a href="javascript:void(0);">Menu Item #2</a></li> <li><a href="javascript:void(0);">Menu Item #3</a></li> <li><a href="javascript:void(0);">Menu Item #4</a></li> <li><a href="javascript:void(0);">Menu Item #5</a></li> </ul> </div> </div> </nav> <div id="box2" class="pad-section"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h3>Option #2</h3> </div> </div> </div> </div> <!-- /box2 --> <!-- box3 --> <div id="box3" class="pad-section"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h3>Option #3</h3> </div> </div> </div> </div> <!-- /box3 -->

/* padded section */ .pad-section { padding: 150px 0; } .pad-section img { width: 100%; } /* vertical-centered text */ .text-vcenter { display: table-cell; text-align: center; vertical-align: middle; } .text-vcenter h1 { font-size: 4.5em; font-weight: 700; margin: 0; padding: 0; } /* additional sections */ #box1 { background: darkblue; color: white; display: table; height: 300px; width: 100%; } #box2 { background-color: #EA8200; color: white; height: 100%; } #box3 { background-color: #182C3C; color: white; height: 100%; } footer { padding: 20px 0; } footer .glyphicon { color: #333333; font-size: 60px; } footer .glyphicon:hover { color: #EE2E24; } .goToTop { position: fixed; top: 0; height: 70px; z-index: 1; } nav { position: absolute; bottom: 0; width: 100%; background: #fff; } nav li { background: #f8f8f8; }

$(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $("#box1").height(); ($(window).scrollTop() > navHeight) ? $('nav').addClass('goToTop') : $('nav').removeClass('goToTop'); }); });