html - How to float bootstrap navbar & have it appear only from second section down? (example included) -

i'm trying emulate effect: http://99webpage.com/theme-review/landingpage/lotek/index-alt1.html

here's html have far:

<header style="height: 60px;">     <div class="navbar navbar-default sticky" role="navigation">         <div class="container">             <div class="navbar-header">                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                 </button>                 <a class="navbar-brand" href="#"><img src="img/logo-small.png" alt=""></a>             </div>             <div class="collapse navbar-collapse">                 <ul class="nav navbar-nav">                     <li><a href="#home" class="">home</a></li>                     <li><a href="#intro" class="selected">introduce</a></li>                     <li><a href="#features" class="">features</a></li>                     <li><a href="#testimoni" class="">testimoni</a></li>                     <li><a href="#products" class="">products</a></li>                     <li><a href="#team">team</a></li>                     <li><a href="#blog">blog</a></li>                     <li><a href="#pricing">pricing</a></li>                     <li><a href="#contact">contact</a></li>                 </ul>             </div><!--/.nav-collapse -->         </div>     </div> 

(copied above source)

i'm using standard bootstrap formatting except adding:

position: fixed; top: 0; 

this pins top example linked doesn't appear until second section , stop @ second section when scrolling up.. how can that?

you can use bootstrap affix. see docs , example snippet.

$('#nav').affix({    offset: {      top: $('header').height()    }  });

header {    height: 200px;  }  #nav.affix {    position: fixed;    top: 0;    width: 100%;    z-index: 10;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <header class="masthead">    <div class="container">      <div class="row">        <div class="col-sm-12">          <h1>bootstrap 3 affix</h1>          </div>      </div>    </div>  </header>  <!-- begin navbar -->  <div id="nav">    <nav class="navbar navbar-default navbar-static">      <div class="container-fluid">        <!-- brand , toggle grouped better mobile display -->        <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">toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            </button> <a class="navbar-brand" href="#">brand</a>          </div>        <!-- collect nav links, forms, , other content toggling -->        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">          <ul class="nav navbar-nav">            <li class="active"><a href="#">link <span class="sr-only">(current)</span></a>              </li>            <li><a href="#">link</a>              </li>            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>                <ul class="dropdown-menu">                <li><a href="#">action</a>                  </li>                <li><a href="#">another action</a>                  </li>                <li><a href="#">something else here</a>                  </li>                <li role="separator" class="divider"></li>                <li><a href="#">separated link</a>                  </li>                <li role="separator" class="divider"></li>                <li><a href="#">one more separated link</a>                  </li>              </ul>            </li>          </ul>        </div>        <!-- /.navbar-collapse -->      </div>      <!-- /.container-fluid -->    </nav>  </div>  <!-- begin body -->  <div class="container">    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>    <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.      has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop      publishing software aldus pagemaker including versions of lorem ipsum.</p>  </div>