Bootstrap数据偏移底部

Question

我对the bootstrap affix data-offset-bottom有疑问。 因此，我创建了一个小例子来显示问题。 被瞄准的容器停在正确的位置，但是当向上滚动时它会跳跃。

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

＆＃13;

＆＃13;

@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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已将data-offset-top="-1"属性添加到<nav ... >。这就是全部。请检查结果：

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

＆＃13;

＆＃13;

@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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;