Question

我试图为固定位置的无限水平滚动图案/图像提供一个功能（见下文）。无限滚动功能有效，但是我唯一的问题是固定位置。

我想给该无限水平滚动图像一个固定的位置，这意味着如果我向下滚动网站，该图像应保持在原位并同时水平滚动。

我尝试在css类选择器下添加"position:fixed;"或"background-attachment: fixed"，但是它不起作用，而是消失了，图像消失了。

.hero {
  height: 300px;
}

.hero-img {
  background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/50859/bit-tile-blue.gif) repeat-x 50% 0;
  animation: infinite-shift-left 5000s linear;
  
}

@keyframes infinite-shift-left {
  0% {
    background-position: 50000px;
  }
  100% {
    background-position: 0;
  }
}

<div class="hero hero-img">
</div>

Answer 1

由于position: fixed;从文档流中删除了元素，因此<div>不会自动填充屏幕的宽度。要解决此问题，请给它一个width：

.hero {
  height: 300px;
  width: 100%;
  position: fixed;
}

Answer 2

添加

position: sticky;
top: 0;

进入您的.hero班

无限水平滚动模式/具有固定位置的图像

2 个答案: