html - CSS:Topbar 不跟随页面的滚动

Question

我知道我的问题可能有解决方案，但因为它是一个特定的代码，我决定发帖寻求帮助，所以让我们开始吧

我有一个顶部栏(如横幅)需要跟随滚动但它不会停留在一个位置并且不会移动我已经尝试过 position:fixed 和 width:100% 但它在页面顶部增加了一点空白

这是我的CSS代码:

.topBar{
  height: 50px;
  overflow: hidden;
  list-style-type: none;
  margin-left: -10px;
  margin-top: -10px;
  margin-right: -8px;
  padding: 0;
  background-color: #111;
  z-index: 1;
  background-image : url("image.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
} 

这是我在标题中加载顶部栏的代码:

<ul class="topBar">
      <li class="topBarItems" style="float: right; color: #fff; padding-top: 15px; padding: 8px 15px; font-size: 25px;"><i class="fa fa-user" aria-hidden="true"></i> <?php echo $username?></li>
    </ul> 

This is my desired result, here the position and width is not set but there it doesn't follow the scrolling

This is what happens when i apply position:fixed and width:100%, there is a white bar added on top and the scrolling works just fine

Answer 1

.topbar {
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 500px;
    z-index: 99999;
}
html.is-topbar {
    padding-top: 50px;
}