WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Affix Plugin (Advanced)


The Affix Plugin

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.

Example An affixed navbar:


How To Create an Affixed Navigation Menu

The below example shows how to create a horizontal affixed navigation menu:

Example

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="200">
Try it Yourself »

The below example will help how to create a vertical affixed navigation menu:

Example

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="209">
Try it Yourself »

Example Explained

We can add data-spy="affix" to the element you want affixed.

Otherwise you can add the data-offset-top|bottom attribute to calculate the position of the scroll.


Scrollspy & Affix

Using the Affix plugin together with the Scrollspy plugin:

Horizontal Menu (Navbar)

<body data-spy="scroll" data-target=".navbar" data-offset="55">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="200">
...
</nav>

</body>
Try it Yourself »

Vertical Menu (Sidenav)

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="210">
  ...
</nav>

</body>
Try it Yourself »


WELOOKUPS