Menu
I'm new to Twitter Bootstrap and want to have a NavBar at the bottom of a deep'ish MastHead and when the user vertically scrolls the page and the NavBar gets to the top of the page, change the style to so that the NavBar becomes Fixed. The effect I want is the same as http://www.happycog.com/ only using the Bootstrap NavBar.
So, the real question is how to trigger the navbar-fixed-top style when the NavBar is scrolled to position 0 ie: the top of the browser.
Any ideas or pointers would be appreciated. Thank you.
561
To create a sticky navbar, you use the position: fixed; CSS property to "stick" your navbar to the viewport, and position: sticky; to make it stick to its parent element.
To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
How does Sticky Header work in Bootstrap? Sticky Header is nothing but navigation bar, if we want to make navigation bar becomes stick at the top (sticky header) then use offsetTop within the JavaScript file. Include bootstrap feature in our application we must specify some pre-defined libraries inside our application.
The CSS class navbar-fixed-top is what you want to add.
Here's an example:
<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'>
<!-- nav content -->
</nav>
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