Hi Readers,

Affix means attached or locked, hence Affix navigation helps and authorize an element to lock or get attached to a particular area of web page. This is general used with icons (social media icons like- FB, Twitter, LinkedIn, G+ etc) or navigation menu so that when user scroll the page up or down the icons or menu should get freeze at particular area.

here is a example of Affix navigation bootstrap.

Live example

http://107.20.120.5/HTML/fn/Affix.html

 <style>
      .affix {
          top: 0;
          width: 100%;
      }

      .affix + .container-fluid {
          padding-top: 70px;
      }
      </style>


<div class="container-fluid" style="background-color:green;color:#fff;height:200px;">
  <h1>Affix Example</h1>
  <h3>Fixed navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1000px">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci sem, ultricies in mi in, interdum vestibulum ante. Fusce blandit dui sit amet tristique venenatis. Integer eu tortor quis augue faucibus cursus sed quis elit. Praesent tincidunt velit iaculis, faucibus est vitae, euismod nisl. Sed congue non lacus quis tincidunt. Etiam accumsan eros ut leo porttitor, eu finibus purus aliquet. Duis cursus quam consequat finibus pulvinar. Nunc eu fermentum augue. Aliquam sit amet purus a ex tempor euismod vel et tellus. Proin id tempus lorem. Donec aliquam scelerisque quam, a iaculis enim elementum quis. Cras et est dolor. Nam tempor at risus sit amet tempus</h1>


</div>

In the above example the menu named- basic topnav and page 1, page 2 and page 3 do not get hidden when you scroll the page down.