如何在粘貼時保持導航欄居中？

在處理最近的項目時，我想添加一個滾動然後修復標題。我經常對此進行研究，但許多在線資源並沒有多大幫助，因爲它們依賴於舊版本的各種語言，或者廣泛地依賴於無法解釋的「幻數」。最終，我決定簡單地編寫它自己，並製作了以下內容：如何在粘貼時保持導航欄居中？

$(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; 
}

預先感謝您的任何和所有幫助您可以提供！

來源

2017-01-14 Bugsy

的問題是，一個絕對的或固定的定位元件將只佔用的空間量在屏幕上作爲它裏面的內容。因此，元件由將佔據屏幕的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%;的元素代替，但你必須牢記的任何盒模型的問題在於可能會出現這種情況，或者使用box-sizing: border-box;來防止nav擴展到視口寬度以外的情況，以防您使用任何可能導致寬度擴展超過100％的填充或邊框。

來源

2017-01-14 22:57:57

完美的工作，謝謝。還有一個問題：如果你可以做這樣的事情'的.css（{ '頂'： '0'， '左'： '0'， '右'： '0'}）'，可能我已經結合'的.css（ ''position'，'fixed'）''以獲得'.css（{'top'：'0'，'left'：'0'，'right'：'0'，'position'，'fixed'} ）;'？ – Bugsy

@Bugsy np！是的，你可以把它們組合起來。另外，一個更清潔的方式做這將是把所有的CSS屬性像'.sticky'一類和你使用jQuery'$ .addClass（「粘」）;'和'$ .removeClass（「粘性」）;''根據你的'scrollTop（）'條件。 –

如何在粘貼時保持導航欄居中？

回答

相關問題