ブートストラップデータオフセット底面

Question

the bootstrap affixdata-offset-bottomに問題があります。 したがって、問題を表示するための小さな例を作成しました。 スパイダリングされたコンテナは正しい位置で停止しますが、スクロールアップするとジャンプします。

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>

Answer 1

私は<nav ... >に属性data-offset-top="-1"を追加しました。それで全部です。結果を確認してください：

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>