Search within TutorialsPark

Twitter Bootstrap Affix


To Affix a Navigation Bar and toggle it on and off


Twitter Bootstrap: Positioning Affix Bar using CSS

1. The affix toolbar can be positioned using three classes, .affix , .affix-top and .affix-bottom.

2. The actual positions of the plugin needs to be set by the user using CSS style rules .

The class .affix-top puts the affix toolbar at the top, no CSS positioning is required .

The class .affix is used to affix toolbar aside the element. CSS positioning fixed is used.

The class .affix-bottom is used to affix toolbar at the bottom , CSS positioning fixed is used.

Twitter Bootstrap: Affix via Data-Attributes

1. To create an element with affix behaviour, add attribute data-spy="affix" to the element which is to be spied upon.

2. Use offset to set when to toggle the pinning of an element.

Example: Twitter Bootstrap Affix

Give it a TRY! »