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

Question

I'm trying to make this card with a sticky top and sticky bottom since they show some info and inputs that I would like to be always shown. The problem is that after scrolling some of the content inside, the top goes away and I don't want that.

I found out that the problem goes away after removing the card-footer or styling the card height on auto. The thing is that where I want to position if the screen size is large enough needs a specific height. Also can't remove the footer because It has content.

I've tried moving the sticky's outside the card-body but then on mobile they would be lost in the scrolled away kingdom...

The answers I've found on other questions weren't very helpful since many are for sticky footers and aren't trying to put the sticky inside a bootstrap card

.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 changes needed...

• commented the div under the sticky footer... so that footer is nice and sticky to the bottom
• separated the <form> and .card class, so that the fixed height is not on the .card div element... this is because the stickiness goes away if the parent has a fixed height - which we needed for <form> and this fixed height is still on the <form>

Working snippet below:

.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>