Menu
I'm trying to use Twitter Bootstrap's new affix option, but I can't quite get it right.
I have put together an example at http://jsfiddle.net/yPgUu/1/ and the relevant part is
<ul class="nav nav-list" data-spy="affix">
The left nav starts off at the correct position. However, as you scroll down, then there is a gap at the top of the nav. I'd like the nav to always be at the top of the current view, instead of being a gap.
I've also tried playing around with data-offset-top="200", but that just seem to makes the menu bounce around.
What am I missing?
341
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.
Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
All Bootstrap's JavaScript files depend on util. js and it has to be included alongside the other JavaScript files. If you're using the compiled (or minified) bootstrap. js , there is no need to include this—it's already there.
OK, so this needs to be done in two parts.
http://jsfiddle.net/yPgUu/2/
First, assign data-offset-top="50" and then modify the affix property in css
.affix {
top: 10px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With