Bootstrap data-offset-bottom

http://stackoverflow.com/questions/37110409/

by Gleb Kemarsky

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-bottom="1500" data-offset-top="-1">
  <div class="container-fluid">
    <p>
      I will stop at section 3
    </p>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">  
         
        </ul>
      </div>
    </div>
  </div>
</nav>    

<div id="section1" class="container-fluid">
  <h1>Section 1</h1>  
</div>
<div id="section2" class="container-fluid">
  <h1>Section 2</h1> 
</div>
<div id="section3" class="container-fluid">
  <h1>Section 3</h1> 
</div>

CSS

body {
  position: relative; 
  color: white;
}
.affix {
  top:50px;
  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:1500px;color: #fff; background-color: #ff9800;}