How can we have fixed navigation bar having same behaviour like this on website https://ooomf.com/ and also with two different type of menu items.
For example on the website above they have stories, how it works , blog and login at the top menu and when you scroll down in fixed menu "login" gets replaced with "start your project" button.
How do we accomplish that using css/jquery in bootstrap 3 ?
Help would be appreciated.
Thank you.
It is called a sticky navigation bar. Now you can find many variations of this but here is a great tutorial for a simple one.
You simply apply in bootstrap with afix
$('#navbar').affix({
offset: {
top: 50
}
});
Update Via data attributes To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.
<div data-spy="affix" data-offset-top="60">
...
</div>
You can set up on data-offset-top="200"
when you need to show. here is the example
DEMO http://jsfiddle.net/6P5sF/56/
Reference: http://getbootstrap.com/javascript/#affix
Here is an example with 2 navbars. The affix
component is used to pin the 2nd navbar to the top once the user has scrolled past the top header. You can use CSS z-index
to position the 2nd navbar over the first...
#topNav {
z-index:-1;
}
#nav {
width: 100%;
position:static;
top:-32px;
}
#nav.affix {
position: fixed;
top: 0;
z-index:10;
-webkit-transition: all .6s ease-in-out;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.