CSS：Topbar不跟随页面的滚动

Question

I know there may be a solution out the for my problem but because its a specific code i decided to make a post and ask for help, so lets get started

I have a topbar (like a banner) that needs to follow the scrolling but it doesn't it stays in one position and it doesn't move i already tried position:fixed and width:100% but it adds a little empty space on the top of the page

This is my css code:

.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;
} 

This is the code where i load the topbar in the header:

<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

Is this what you want?

https://jsfiddle.net/15416xb1/4/

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

I do not get the white space at the top

Answer 2

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