Create Affix (Menu)

Create a Affix (Menu Version)

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

Affix (Menu Version)

  1. Create a new file in the site root directory with the Bootstrap framework and save it (e.g., affix_menu.html)

    TIP: Use an existing page that has the Bootstrap framework and delete the content between the <body> opening and closing tags.

  2. Write the following <script> tag above the closing </html> tag to position the section that will be created later.

    <style>
    .affix {
    top: 20px;
    }
    </style>
    </html>

  3. Below the opening <body> tag, write the following HTML code to create the header, NavBar and page:

    TIP: See NavBar section for details on code.

    <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&nbsp;learning.</p>
    <p>Learn:</p>
    <p>HTML&nbsp;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>

  4. CHECK POINT: Save the file and preview it in a browser.  You should see that if you scroll the page, it will scroll until the top of the menu reaches the top of the page. At this point the menu is fixed; however, the page continue to scroll.