Se reporter à travailler pour nav et la barre de navigation

J'ai quelques html pour une mise en page d'une page d'un site pour le logiciel de la bibliothèque de mon groupe de recherche fait. C'est fait avec bootstrap 3. Ce que je voudrais obtenir la barre de navigation qui se produit juste en dessous de la jumbotron pour devenir fixe en haut de la page une fois qu'il se défile. J'aimerais aussi un comportement similaire pour le rappel de l'élément dans la colonne de gauche de la page lorsque la page défile et qu'ils atteignent le haut - qu'ils deviennent alors fixe et y rester. En lisant, je comprends que les Apposer dans twitter bootstrap est le chemin à parcourir à ce sujet, mais je ne suis pas tout à fait sûr que je ne peux comprendre comment faire de ce droit.

Avec le code HTML ci-dessous ce qui se passe est, après le défilement jusqu'à présent, la barre de navigation qui doivent occuper la page devient écrasé - la barre de navigation des liens de se déplacer vers une ligne en dessous de la barre de navigation de la marque et le bar ne pas s'étend sur la page. Une fois que j'ai de comprendre comment l'utiliser apposer avec la barre de navigation, je l'espère, à utiliser avec l'élément nav. Quelqu'un peut-il expliquer ce que je dois faire pour obtenir l'effet? Je suis assez nouveau à la conception web trucs.

Grâce,
Ben.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SOFTWARE - GETTING STARTED WITH SOFTWARE</title> 
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
</head>
<body>
<style>
.jumbotron {
margin-bottom: 0px;
}
</style>
<!-- Start of main container -->
<div class="container-fluid main">
<div class="row-fluid">
<div class="jumbotron">
<h1> Getting Started </h1>
<p> Installing SOFTWARE on your machine is easy for most systems.
This guide will get you up and running.
</p>
</div>
</div>
<!--Here's thestart of the navabar I'm trying to affix -->
<div class="row-fluid" data-spy="affix" data-offset-top="200">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">SOFTWARE</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About SOFTWARE</a></li>
<li class="active"><a href="#">Getting Started</a></li>
<li><a href="#">Quick Start</a></li>
<li><a href="#">Full Documentation</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Download <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">GitHub Repository</a></li>
<li><a href="#">Download TAR</a></li>
<li><a href="#">Download ZIP</a></li>
</ul>
</li>
</ul>
</div>
</div>  
</div>
<!-- Begin Layout for Getting Started Page -->
<div class="row-fluid">
<div class="col-lg-3">
<ul class="nav nav-pills nav-stacked sidemenu">
<li><a href="#">Introduction</a></li>
<li><a href="#">Installing R</a></li>
<li><a href="#">R Recommendations</a></li>
<li><a href="#">Installing HybRIDS from GitHub</a></li>
<li><a href="#">Installing HybRIDS from Source File</a></li>
<li><a href="#">Installing HybRIDS from Binary File</a></li>
</ul>
</div>
<div class="col-lg-9 whitep">
<h1 class="whitep">Introduction</h1>
<p>
Installation text
Installation text
Installation text
Installation text
Installation text
</p>
<hr>
<h1>Installing R</h1>
<p>
R is simple to install for most operating systems. If you use a Mac or PC or Linux system, the process for installing it is like for installing any other software on that system. 
</p>
<p>
TEST text to fill page to test scrolling behaviour...
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>    
</div>
</div>
</div> <!--End of main Container-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

OriginalL'auteur Ward9250 | 2013-08-26