2017-02-23 8 views
0

私は-viewport-overflow-scrollを使用しています。オーバーフロー:自動; iosで運動量のスクロールを使用できるようにするために、私はブートストラップのnavbarに問題があります。私がスクロールするとき、スクロールを止めるまで、ナビゲーションバーはページの中央にとどまり、数秒後に再びボトムにスティックされます。何か案は? navbarはスクロールタッチでdiv内にあります。 これは、ナビゲーションバーです:ブートストラップ3 iosでスクロールするときにnavbarが下に固定されない

<nav class="navbar navbar-fixed-bottom footer"> 
    <div class="pull-left footer-text"> 
     <span>All rights reserved</span> 
    </div> 
    <div class="pull-right footer-icons"> 
     <img class="footer-icon" /> 
     <img class="footer-icon" /> 
    </div> 
</nav> 


.footer{ 
min-height:1em; 
bottom:0; 
background-color: #35AEEE; 
right: 0; 
left: 0; 
color: white; 
} 

答えて

0

あなたはbottom: 0;を持っているので、あなたはそれがページの下部に付着させるためにposition: absolute;プロパティを追加することができます。

.footer { 
 
    min-height: 1em; 
 
    bottom: 0; 
 
    background-color: #35AEEE; 
 
    right: 0; 
 
    left: 0; 
 
    color: white; 
 
    position: absolute; 
 
}
<nav class="navbar navbar-fixed-bottom footer"> 
 
    <div class="pull-left footer-text"> 
 
    <span>All rights reserved</span> 
 
    </div> 
 
    <div class="pull-right footer-icons"> 
 
    <img class="footer-icon" /> 
 
    <img class="footer-icon" /> 
 
    </div> 
 
</nav>

+0

はい、私はそれを試してみましたが、私はポジションを追加する場合:絶対;ページが最初に読み込まれたときにページの下部があった位置にしか固執しません – lin001

+1

解決しました。 -viewport-overflow-scroll:touchの内部に固定要素を持つことはできません。これを見てくださいhttps://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios – lin001

+0

良い発見、共有ありがとう! – Hewlett