Menu parar no topo da página ao rolar scrol

Pesquisei diversos sites mas não consegui encontrar um código que fizesse o menu parar no topo da página ao rolar o scroll e ao mesmo tempo funcionasse com o bootstrap.

Seria algo desse tipo: http://www.w3schools.com/bootstrap/default.asp

Alguém teria uma dica?

Abaixo parte do meu código:

<div class="row">
	<img class="img-responsive" src="<?php echo base_url(); ?>img/banner.jpg">
</div>
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
 <div class="container-fluid">
 <!--Botão para telas pequenas-->
 <div class="navbar-header ">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">navegacao</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!--<a style="padding: 0" class="navbar-brand" href="index.html"><img src="<?php echo base_url(); ?>img/logo.jpg"></a>-->
 </div>
 <!-- Itens do menu -->
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav navbar-right">
 <?php $this->load->view($menu); ?>
 </ul>
 </div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
</nav>

A ideia é a primeiro div ficar acima do menu e sumir quando o scroll rolar, mas o menu ficar fixo no topo.

Obs.: Nesse código o primeiro div está ficando embaixo do menu.