Create affix container
Description
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 w w . 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>