引导数据偏移底部答案

【问题标题】：Bootstrap data-offset-bottom引导数据偏移底部
【发布时间】：2016-05-09 07:55:45
【问题描述】：

我对@987654321@ data-offset-bottom 有疑问。因此我创建了一个小例子来展示这个问题。被监视的容器停在正确的位置，但向上滚动时它会跳转。

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

【问题讨论】：

标签： javascript css twitter-bootstrap affix

【解决方案1】：

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

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>

【讨论】：