How To Create an Affixed Navigation Menu
The following example shows how to create a horizontal affixed navigation menu:
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
The following example shows how to create a vertical affixed navigation menu:
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Example Explained
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.How it works
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.- The plugin adds the
.affix-topor.affix-bottomclass to indicate the element is in its top-most or bottom-most position. Positioning with CSS is not required at this point. - Scrolling past the affixed element triggers the actual affixing - This is where the plugin replaces the
.affix-topor.affix-bottomclass with the.affixclass (setsposition:fixed). At this point, you must add the CSStoporbottomproperty to position the affixed element in the page. - If a bottom offset is defined, scrolling past it replaces the
.affixclass with.affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, addposition:absolutewhen necessary.
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)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Vertical Menu (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
0 comments:
Post a Comment