当导航栏停留在页面顶部时，导航栏会停留在页面的右侧

Question

我已将导航栏设置为在向下滚动时停留在顶部。但是由于某些原因，div边缘会粘在页面的边缘。

我搜索了很多，但找不到任何东西，我只需要一直将它居中...

Scala 2.13

(function($) {
    "use strict";

    var $navbar = $("#navbar"), y_pos = $navbar.offset().top, height = $navbar.height();

    $(document).scroll(function() {
        var scrollTop = $(this).scrollTop();

        if (scrollTop > y_pos + height) {
            $navbar.addClass("navbar-fixed").animate({
                top: 0
            });
        } else if (scrollTop <= y_pos) {
            $navbar.removeClass("navbar-fixed").clearQueue().animate({
                top: "-48px"
            }, 0);
        }
    });
})

/* nav stick to top*/
.navbar-fixed {
    top: 0;
    position: -webkit-fixed; /* Safari & IE */
    position: fixed;
    width: 100%;
    vertical-align: middle;
}

/*----------------------
  $NAVBAR
    basic navbar styling
  ----------------------*/
nav {
    overflow: hidden;
    display: block;
    width: 100%;
    color: #bbb;
    background-color: rgba(46, 46, 46, .6);
    font-weight: bold;
    letter-spacing: 0.025em;
    border-radius: 5px;
}

nav ul {
    text-align: center;
    margin: 0;
}

nav ul li {
    display: inline-block;
    padding: 0 3em;
    line-height: 3em;
    transition: .1s ease;
    color: rgba(0,255,255,0.5);
    text-shadow: rgba(255, 0, 0, .8) -2.5px 0px 0px;
    -webkit-filter: blur(.2px);
}

nav ul li:hover {
    background: #156499;
    color: rgb(255, 255, 255);
    text-shadow: none;
    -webkit-filter: blur(0px);
}

我希望它一直在屏幕中间，但是它只是在边缘徘徊...

Answer 1

只需在left: 0; CSS中添加.navbar-fixed，即可解决您的问题。谢谢

.navbar-fixed {
    top: 0;
    position: -webkit-fixed; /* Safari & IE */
    position: fixed;
    width: 100%;
    vertical-align: middle;
    left: 0;
}