I have a page that displays a large number of cards horizontally using Bootstrap 5. The first card is used as a header record while the other cards can be scrolled horizontally. This all works fine.

My users have requested that the first card should be locked in place (always displayed) as they are scrolling through the other cards horizontally. This works, but only for the initial set of cards displayed on the viewport. Once you scroll past those, the first card also scrolls off the page.

I could use some assistance in setting this up so the first card is always displayed on the page and does not scroll off. The other cards should scroll behind the first card

I have an example of the code here: https://www.codeply.com/p/3nwL7bVEMl

CodePudding user response：

1. you can give your sticky card a height

2. before using z-index you need to use display:relative; than add a z-index to your sticky card

3. use position:fixed; to make your card stay in the screen always.

.sticky-card {
    min-width: 400px;
    height:220px;
    display:relative;
    z-index: 1;
    position: fixed;
    left: 0;

}

CodePudding user response：

Add an overflow to the wrapper/container class (<div >).

.d-flex.flex-row.flex-nowrap.bg-warning {
    overflow: auto;
}

You can find other options here.