The Affix plugin allows an element to become "fixed" or locked to an area on the page while scrolling. It toggles three CSS classes (e.g., .affix, .affix-top and .affix-bottom) that represent the state. It changes the position from static to fixed depending on scroll position.
The CSS properties must be added to handle the actual positions with the exception of position:fixed on the .affix class.
TIP: The Affix plugin is often used together with the Scrollspy plugin.
View Demo<style>
.affix {
top: 20px;
}
</style> </html>
<body> <div class="container-fluid" style="background-color:#5C4383;color:#fff;height:200px;">
<h1>RMCS: <small style="color:white">Learning Made Easy</small></h1>
<p>See, hear, and experience a new way of learning.</p>
<p>Learn:</p>
<p>HTML 5, CSS 3 and JavaScript.</p>
</div>
<br>
<div class="container" style="height:1500px">
<div class="row">
<nav class="col-sm-3">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
<li class="active"><a href="#section1">HTML 5</a></li>
<li><a href="#section2">CSS 3</a></li>
<li><a href="#section3">JavaScript</a></li>
</ul>
</nav>
<div class="col-sm-9">
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
<p>Scrollable page content goes here...</p>
</div>
</div>
</div>
- The data-spy="fixed" attribute is used to make an element fixed.
- The data-offset-top="205" attribute is used to "offset" the page 200px from the top.