Bootstrap Tutorial - Create affix container








The following code shows how to create affix container.

Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<style type='text/css'>
#con .well {<!--from   w ww  .  j  av a 2  s.c  om-->
  height: 400px;
}

#nav.affix {
  position: fixed;
  top: 0;
  width: 100%
}
</style>
</head>
<body style='margin:30px'>
  <div class="container" id="con">
    <div class="row">
      <div class="span12">
        <div class="well">
          <h1>Header</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="container" data-spy="affix" data-offset-top="400" id="nav">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <div class="span12">
            <a class="brand" href="#">Home</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="span3">
      <p style="height: 1000px; padding: 10px;">Long scrolling text
        here... Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah
        goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd
        goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd
        idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.
        Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar        goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd
        idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.
        Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar        goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd
        idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.
        Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar        goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd
        idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.
        Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar        goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd
        idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.
        Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar        idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.
        Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar
        foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr.
        Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.</p>
    </div>
  </div>
</body>
</html>

Click to view the demo