How Can I Fix The Bootstrap Navbar To The Top After A Div Was Scrolled?
I am trying to get my navbar with bootstrap to appear after a certain div, called 'A'. Div 'a' is at the top of by page, and has a height of around 400px. Once the user scrolls pas
Solution 1:
If you'd like to achieve this using Twitter's Bootstrap check out the 'Affix' js. You define the "fixed" point using the "data-offset-top" and then the navbar will become fixed to the top when user scrolls down.
CSS:
#con.well {
height:390px;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
HTML:
<div class="container" data-spy="affix" data-offset-top="400"id="nav">
<div id="nav"class="navbar">
<div class="navbar-inner"> ...
Javascript:
$('#nav').affix();
Here is the working fiddle: http://jsfiddle.net/skelly/df8tb/
Here's a working example (updated for Bootstrap 3): http://bootply.com/90936
Solution 2:
To get the effect show on facebook.com/home your navbar position should be set to static (or relative / absolute) until the user scrolls past 400px and then you need to set it's position to fixed so that is stays at the top of the screen. This can be done with a little javascript.
Solution 3:
This answer is no longer correct. Please see @zim's answer below.
Solution 4:
please just follow this. you will not see the snap thing when the menu bar reached the top position.
<!DOCTYPE html><html><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><style>body {
position: relative;
}
.affix {
top:0;
width: 100%;
z-index: 9999!important;
}
.navbar {
margin-bottom: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style></head><bodydata-spy="scroll"data-target=".navbar"data-offset="50"><divclass="container-fluid"style="background-color:#F44336;color:#fff;height:200px;"><h1>Scrollspy & Affix Example</h1><h3>Fixed navbar on scroll</h3><p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p><p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p></div><navclass="navbar navbar-inverse"data-spy="affix"data-offset-top="197"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#myNavbar"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">WebSiteName</a></div><div><divclass="collapse navbar-collapse"id="myNavbar"><ulclass="nav navbar-nav"><li><ahref="#section1">Section 1</a></li><li><ahref="#section2">Section 2</a></li><li><ahref="#section3">Section 3</a></li><liclass="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#">Section 4 <spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#section41">Section 4-1</a></li><li><ahref="#section42">Section 4-2</a></li></ul></li></ul></div></div></div></nav><divid="section1"class="container-fluid"><h1>Section 1</h1><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p></div><divid="section2"class="container-fluid"><h1>Section 2</h1><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p></div><divid="section3"class="container-fluid"><h1>Section 3</h1><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p></div><divid="section41"class="container-fluid"><h1>Section 4 Submenu 1</h1><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p></div><divid="section42"class="container-fluid"><h1>Section 4 Submenu 2</h1><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p></div></body></html>reference: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h
Post a Comment for "How Can I Fix The Bootstrap Navbar To The Top After A Div Was Scrolled?"