異なる位置に2つの固定されたnavbarを追加する

問題は、navbar2を動かすことなく簡単にスクロールすることができるように、navbar2クラスの2番目のnavbarもdivitelfで修正されるようにしたいということです。もう1つの問題は、navbar2が固定されているときに幅が異なるサイズの画面で維持できないことです。作業コードここhttps://jsfiddle.net/0sqk00Lw/4/です..あなたはそれを修正できない相対的に位置を設定した場合、誰かが...事前異なる位置に2つの固定されたnavbarを追加する

<nav class="navbar navbar-default navbar-fixed-top navbar1"> 
<div class="container"> 
    NAVBAR FIXED TOP 
</div> 
</nav> 
<div class="row"> 
<div class="col-xs-2" style="background-color:blue"> 
    hello 
</div> 

<div class="col-xs-10"> 
    <nav class="navbar navbar-default navbar-static-top navbar2"> 
     <div class="container"> 
      NAVBAR FIXED TOP 
     </div> 
    </nav> 
    <p> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    </p> 
</div>

出典

2016-06-22 Sahil Chauhan

このフィドルを見てください。 https://jsfiddle.net/h7fjtbhz/

すべての要素は、100％の幅に変更し、何かが変更されなければならない場合に

height:calc(100% - 100px); // change 100px to height of remaining elements above the second navbar

を教えてくださいpタグのための高さを計算しました。

出典

2016-06-22 09:18:11

ねえ..ありがとう。:)あなたはそれを解決しました。私はこの単純な解決策を考えることができませんでした。：/ –

.navbar2{ 
    position:relative; 
    width:100%; 
    background-color:#fed136; 
}

に感謝を助けることができます。それは設定されるべき位置：固定が必要です。（親要素ではなく）ビューポートに関連して配置する必要があります

出典

2016-06-22 08:40:28

位置を固定した後の唯一の問題は、navbar2の幅を別の画面サイズで何度もハードコードしなければならないことです。幅を100％に割り当てることで親にマッチしません。 –

親。親はビューポートです。あなたは、onscrollイベントが発生したときに、javascriptによって位置を変更する必要があります。 –

異なる位置に2つの固定されたnavbarを追加する

答えて

関連する問題