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

这是你想要的吗？

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

我没有得到顶部的空白

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

CSS：Topbar不跟随页面的滚动

2 个答案: