貼り付けたときにNavbarを中央に保持する方法は？

Question

最近のプロジェクトで作業しているときに、スクロール・アンド・フィックスのヘッダーを追加したかったのです。私はこれを徹底的に調査しましたが、オンラインソースの多くは、さまざまな言語の古いバージョンに依存しているか、説明できない「魔法の数」に広範囲に依存していたため、ほとんど役に立たなかったのです。結局、私は単にそれを自分自身をコーディングすることを決めた、と次のように生成：

$(document).ready(function(){ 
    var elementPosition = $('#navbar').offset(); 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > elementPosition.top) { 
      $('#navbar').css('position', 'fixed').css('top', '0'); 
     } else { 
      $('#navbar').css('position', 'static'); 
}})}); 

これは先頭にナビゲーションバーをスティッキーに努めてきましたが、それは活性化したときに、それは、その中心位置を維持するのではなく、左上にそれをスティッキーズ。私が変更しているのは、「ポジション」と属性「トップ」を追加することなので、突然横にシフトする理由はありません。あなたが持っている可能性のある修正や説明を私は大いに感謝します。参考のため、ここでは関係HTMLは次のとおりです。

<div id="navbar"><ul> 
    <li id="activePage"><a href="">Home</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Upcoming events </a><li> 
    <li><a href="">Contact Us</a></li> 
    <li><a href="">Contribute</a></li> 
</ul></div> 

とCSS：任意およびすべてはあなたが提供することができます助けるために

#navbar { 
    background-color: white; 
    z-index: 1; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    text-align: center; 
    width: 100%; 
} 

#navbar li { 
    text-align: center; 
    display: inline; 
} 

#navbar ul #activePage a { 
    color: #cec8c8; 
} 

#navbar li a { 
    color: black; 
    padding: 14px 35px; 
    text-decoration: none; 
    font-family: 'Roboto Slab'; 
    font-size: 25px; 
    text-align: center; 
} 

は、事前にありがとうございます！

Answer 1

問題は、絶対配置された要素または固定された要素は、画面内の内容として画面上のスペースの量を占めるだけです。したがって、要素は、スクリーンの100％の幅を占めるデフォルトのブロック要素から、内部のコンテンツから必要な幅だけを占める固定された配置要素になります。

これを簡単に扱うには、要素にleft: 0; right: 0;を追加して、ウィンドウビューポートの幅にまたがるように指示します。

あなたは、この行を変更することにより、

$('#navbar').css('position', 'fixed').css('top', '0'); 

へ

$('#navbar').css('position', 'fixed').css({'top':'0','left':'0','right':'0'}); 

あなたはまた、代わりの要素にwidth: 100%;を割り当てることができることを行うことができますが、その後、あなたは、任意のボックスモデルの問題に留意する必要があること幅が100％を超えて拡大する可能性があるパディングやボーダーを使用している場合に、box-sizing: border-box;を使用して、ナビゲーションがビューポートの幅を超えて拡大しないようにしてください。