Have ul list rows not display when scrolled past top of card-header div

user_10534679 0
Viewed 41

I’m having trouble deciding on the best approach for the following behavior:

I have a div that acts as a table header, with the class card-header. Below it on the same level is a ul element that acts as table rows and upon scroll, it is currently overflowing above the table header. I want the rows to not display above the top of the table header (but still partially if needed below the header depending on scroll position). Here is the HTML and CSS I’ve implemented so far for the sticky card-header behavior (needed a seperate sticky-header class for the CSS as the card-header class is shared across the project, in areas where this functionality isn't desired):

<div class="col-12">
  <div class="card card-view list-view messages-ui-card sticky-header">
    <div class="card-header" id="primary_card_header">. . .</div>
    <ul class="list-group list-group-flush">
      <li class="d-flex list-group-item list-view-item message received selectable unread-received"> . . .</li>
      . . .
    </ul>
  </div>
</div>

.sticky-header {
    
  .card-header {
    position: sticky;
    top: 94px;
    z-index: 2;
  }
}

How can I accomplish this in the most concise manner possible? I'm expecting I'll need to incorporate some JavaScript here, but is there a way via raw CSS? Please let me know if supplemental code snippets or info is needed to help (this is my second ever StackOverflow post), thank you!

Current Behavior Image of current behavior

css html
1 Answers

Try this method. Maybe not the best solution

<div class="col-12">
 <div class="card card-view list-view messages-ui-card sticky-header">
 <div class="hidden-top">
  <div class="top-height"></div>
  <div class="card-header" id="primary_card_header">. . .</div>     
 </div>
 
 <ul class="list-group list-group-flush">
  <li class="d-flex list-group-item list-view-item message received selectable unread-received"> . . .</li>
  . . .
   </ul>
 </div>
</div>

and on css:

.sticky-header {

.hidden-top{
  z-index: 2;
  position: sticky;
  top: 0px;
 
  .top-height{
     height:40px;
     background-color:#f7f9f9; //same as body background (put dynamic value)
 }
  

.card-header {
  //main navbar with some styling ("Published broadcasts" card css code)
  }
 }
}
user_199859070
Related