Как сохранить navbar в центре, когда stickied?

При работе над недавним проектом я хотел добавить заголовок scroll-then-fix. Я исследовал это thouroughly, но многие из онлайн-источников были мало помощи, так как они опирались на более старые версии различных языков или полагались на необъяснимые «магические числа». В конце концов, я решил просто кодировать его сам, и произвел следующее:

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

Заранее спасибо за любую и всякую помощь, которую вы можете оказать!

1 ответ

  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%.