header 在 bootstrap V4.4.1 上滚动后滚动消失

Question

我正在尝试制作这张带有粘性顶部和粘性底部的卡片，因为它们会显示一些我希望始终显示的信息和输入。问题是滚动里面的一些内容后，顶部消失了，我不想要那个。

我发现在删除 card-footer 或将卡片高度设置为自动后问题就消失了。问题是，如果屏幕尺寸足够大，我想定位的位置需要特定的高度。也无法删除页脚，因为它有内容。

我试过将便签纸移到 card-body 之外，但在移动设备上它们会迷失在滚动的王国中...

我在其他问题上找到的答案不是很有帮助，因为很多都是针对粘性页脚的，而不是试图将粘性放入 bootstrap 卡片中

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 30px;
  background: red
}

.sticky-bottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  background: lightblue;
}

.the-problem {
  height: 30px
}

.content {
  height: 600px;
  background: gray
}

#thing {
  height: 200px;
  width: 300px;
  overflow: auto;
}

#thing {
  width: 300px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<form id="thing" class="card mt-3">
  <div class="card-header">An unimportant title</div>
  <div class="card-body p-0" style="overflow: initial">
    <div class="sticky-top">
      sticky-top
    </div>

    <div class="content"> Some content </div>

    <div class="sticky-bottom">
      sticky-bottom
    </div>
    <div class="card-footer the-problem px-3">

    </div>
  </div>
</form>


<form id="thing2" class="card mt-3">
  <div class="card-header">An unimportant title</div>
  <div class="card-body p-0" style="overflow: initial">
    <div class="sticky-top">
      sticky-top
    </div>

    <div class="content"> Some content </div>

    <div class="sticky-bottom">
      sticky-bottom
    </div>
    <div class="card-footer the-problem px-3">

    </div>
  </div>
</form>

Answer 1

需要 2 处更改...

评论了粘性页脚下的 div... 这样页脚就很好并且粘在底部
将<form>和.cardclass分开了，这样固定高度就不在.carddiv元素上了...这是因为如果 parent 具有固定高度，则粘性消失 - 我们需要 <form> 并且此固定高度仍在 <form>

工作下面的代码段：

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 30px;
  background: red
}

.sticky-bottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  background: lightblue;
}

.the-problem {
  height: 30px
}

.content {
  /* height: 600px; */
  background: gray
}

#thing {
  height: 200px;
  width: 300px;
  overflow: auto;
}

#thing {
  width: 300px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<form id="thing">
  <div class='card mt-3'>
    <div class="card-header">An unimportant title</div>
    <div class="card-body p-0" style="overflow: initial">
      <div class="sticky-top">
        sticky-top
      </div>

      <div class="content">
        <p> let the actual content occupy the eeded space... </p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </div>

      <div class="sticky-bottom">
        sticky-bottom
      </div>
      <!--    <div class="card-footer the-problem px-3">    </div> -->
    </div>
  </div>
</form>

header 在 bootstrap V4.4.1 上滚动后滚动消失

Sticky header scrolls away after some scrolling on bootstrap V4.4.1

html

css

sticky

bootstrap-4

bootstrap-cards