Как сохранить 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%; элемента вместо этого, но тогда вы должны помнить о каких-либо проблемах блочной модели, которые может возникнуть или использовать box-sizing: border-box;, чтобы сохранить навигацию от ширины окна просмотра, если вы используете любые дополнения или границы, которые могут привести к тому, что ширина будет превышать 100%.