在滚动页面中创建固定的浮动div

Question

在这个例子中，我需要黄色的div保持修复，而不是滚动页面。并且红色的div显示在黄色div下方，中间有一些边距。当红色div滚动时，它应该在黄色div下滚动，黄色和红色div之间应该有边距。请帮忙。

.fixspan
{
    width:100%;
    position:fixed;
    background-color:yellow;
}
.scrollingdiv
{
    background-color:red;
}

<div class='fixspan'>
    <span>This should not scroll with the page.</span>
</div>
<div class='scrollingdiv'>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
</div>

Answer 1

this您要找的是什么？

CSS：

.fixspan {
  width: 100%;
  position: fixed;
  background-color: yellow;
  position: fixed;
  right: 0;
  top: 0;
  width: 10%;
  height: 100px;
}

.scrollingdiv {
  background-color: red;
  width: 88%;
}

我刚刚添加了top，right，width和height属性。否则你的黄色不知道它应该留在哪里。

Answer 2

.scrollingdiv {
  background-color: red;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

<div class='fixspan'>
  <span>This should not scroll with the page.</span>
</div>
<div class='scrollingdiv'>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
  <p>This is to expand content of the page</p>
</div>

希望这会有所帮助

Answer 3

我认为这是你需要的（你的问题很糟糕且难以理解）。黄色div不会与页面一起滚动，因此绝对定位。

.fixspan
{
    width:100%;
    position:absolute;
    background-color:yellow;
}
.scrollingdiv
{
    background-color:red;
}

<div class='fixspan'>
    <span>This should not scroll with the page.</span>
</div>
<div class='scrollingdiv'>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
</div>