如何防止内容滚动到固定的背景容器上？

Question

我想在顶部有一个不滚动的图像。所以我将类fixedbg的容器设置为position: fixed。

但是我想要在该图片下面显示一些内容，当内容到达顶部容器（fixedbg）的底部时，该内容会滚动但会碰壁。

如何使用CSS做到这一点？

在目前的情况下，scrollarea容器的内容只会流过fixedbg。

.fixedbg {
  position: fixed;
  width: 100%;
  height: 200px;
  background-color: whitesmoke;
}

.scrollarea {
  top: 200px;
  position: relative;
  height: 800px;
}

<div class="fixedbg"></div>
<div class="scrollarea">
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
</div>

Answer 1

我认为没有CSS解决方案。您可以使用jQuery并在达到特定限制时强制回滚。这是一个例子：

$(document).scroll(function(e) {
  if (($(".scrollarea").position().top - $(this).scrollTop() < 140)) {
    $('html, body').animate({
      scrollTop: $(".scrollarea").offset().top-120
    }, 200);
  }
});

body,html {
margin:0;
padding:0;
}

.fixedbg {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: whitesmoke;
  background-image: url(https://lorempixel.com/400/200/);
  z-index:9;
}

.scrollarea {
  top: 200px;
  position: relative;
  height: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixedbg"></div>
<div class="scrollarea">
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
</div>

Answer 2

只需在固定图像css中添加z-index，然后从图像下方滚动内容。检查代码段。

.fixedbg {
  position: fixed;
  width: 100%;
  height: 200px;
  z-index: 1;
  background-color: whitesmoke;
}

.scrollarea {
  top: 200px;
  position: relative;
  height: 800px;
}

<div class="fixedbg"></div>
<div class="scrollarea">
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
</div>

Answer 3

＆＃13;

＆＃13;

.fixedbg {
   
}

.scrollarea {
  

position: fixed;
  overflow: hidden;
}

＆＃13;

<div class="fixedbg"></div>
<div class="scrollarea">
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
  <p>scrollarea</p>
</div>

＆＃13;

＆＃13;

＆＃13;