1 Example(s) of Bootstrap Affix


Description :

  • Fixed (sticky) vertical sidenav on scroll.
  • Scroll this page to see how the left navigation menu behaves with data-spy=affix


Bootstrap Affix Example - 1
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Affix Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        .affix {
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="background-color:black;height:100px;">
        <h1>Bootstrap Affix Example</h1>
    </div>
    <br>
    <div class="container">
        <div class="row">
            <nav class="col-sm-2">
                <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
                    <li class="active"><a href="">Part 1</a></li>
                    <li><a href="">Part 2</a></li>
                    <li><a href="">Part 3</a></li>
                </ul>
            </nav>
            <div class="col-sm-offset-2 col-sm-7">
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
                <h1>Some text</h1>
            </div>
        </div>
    </div>

</body>
</html>

Output