SO menu affix

by panchroma

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src=" http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<div id="nav-wrapper" data-spy="affix" data-offset-top="150">
<div id="nav" class="navbar navbar-inverse" >
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div> <!-- close nav-wrapper -->
    
  <p>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in quam felis. Aenean congue ultricies diam vel aliquet. Aliquam eget nisl mi. Pellentesque imperdiet orci vitae dui volutpat bibendum. Donec convallis vestibulum erat eu gravida. Etiam condimentum bibendum iaculis. Pellentesque egestas suscipit augue.
</p>
    <p>
Proin tincidunt sapien faucibus dui sagittis quis elementum justo rutrum. Aenean facilisis tincidunt varius. Sed vel augue eu eros ornare sollicitudin. Donec et odio diam. Proin egestas commodo ante id fringilla. Proin sodales vestibulum diam, at accumsan justo mollis ut. In lacus neque, scelerisque et pretium a, lobortis ac turpis. Aenean...

CSS

#nav-wrapper
{height:150px;
}
}#nav-wrapper.affix {
    /*position: fixed;*/
    top: 0;
    width: 100%
}

/*
#nav {
    position:relative;
}
*/