The Affix plugin allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them "stick" at a specific area while scrolling up and down the page.
The plugin toggles this behavior on and off (changes the value of CSS position from static to fixed), depending on scroll position.
The following example shows how to create a vertical affixed navigation menu
Add data-spy="affix" to the element you want affixed.
Optionally, add the data-offset-top|bottom attribute to calculate the position of the scroll.
The affix plugin toggles between three classes: .affix, .affix-top, and .affix-bottom. Each class represents a particular state. You must add CSS properties to handle the actual positions, with the exception of position:fixed on the .affix class.
In the first example above, the Affix plugin adds the .affix class (position:fixed) to the <nav> element when we have scrolled 197 pixels from the top. If you open the example, you will also see that we added the CSS top property with a value of 0 to the .affix class. This is to make sure that the navbar stays at the top of the page at all time, when we have scrolled 197 pixels from the top.
Horizontal Menu (Navbar)
Vertical Menu (Sidenav)