Bootstrap data-offset-bottom

Question

I have a problem with the bootstrap affix data-offset-bottom. Therefore i created a small example to show the problem. The container which is spyed stops at the right position but when scrolling up it jumps.

https://jsfiddle.net/j68msLno/4/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  position: relative;
  color: white;
}
.affix {
  top: 50px;
  width: 100%;
  z-index: 9999 !important;
}
.affix ~ .container-fluid {
  position: relative;
  top: 50px;
}
.navbar {
  margin-bottom: 0px;
}
#section1 { padding-top: 50px; height:  500px; background-color: #1E88E5; }
#section2 { padding-top: 50px; height:  500px; background-color: #673ab7; }
#section3 { padding-top: 50px; height: 1500px; background-color: #ff9800; }

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-bottom="1500">
  <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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

score 0 · Answer 1 · answered Jun 07 '16 at 00:23

I've added the attribute data-offset-top="-1" to <nav ... >. That's all. Please check the result:

https://jsfiddle.net/glebkema/xd4qg498/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  position: relative;
  color: white;
}
.affix {
  top: 50px;
  width: 100%;
  z-index: 9999 !important;
}
.affix ~ .container-fluid {
  position: relative;
  top: 50px;
}
.navbar {
  margin-bottom: 0px;
}
#section1 { padding-top: 50px; height:  500px; background-color: #1E88E5; }
#section2 { padding-top: 50px; height:  500px; background-color: #673ab7; }
#section3 { padding-top: 50px; height: 1500px; background-color: #ff9800; }

<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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Bootstrap data-offset-bottom

1 Answers1