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

时间:2017-11-04 07:33:00

标签: html css scroll

我想在顶部有一个不滚动的图像。所以我将类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>

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:-1)

只需在固定图像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>

答案 2 :(得分:-2)

&#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;