Html 使用Mat卡在标题下方滚动时使标题粘滞

我在滚动mat内容时遇到问题。 实际上，我希望我的内容在标题下滚动。而标题不是透明的。 如果你看到谷歌，你就会找到它。 为了更好地理解，我将嵌入视频链接，它应该看起来像什么。 我应该怎么做才能使mat卡内容通过标题

：：ng deep.card{
最大高度：700px！重要；
最小高度：700px！重要；
溢出：滚动；
溢出x：隐藏；
背景#f9fdfb；
边界半径：10px！重要；
}
：-webkit滚动条{
宽度：0；
背景：透明；
}
：-webkit滚动条拇指{}
：：占位符{
颜色：#DCDC；
不透明度：1；
}
.集装箱{
填充顶部：100px；
左侧填充：400px；
右边填充：400px；
垫底：110px；
}
.头衔{
字体系列：雷威；
字号：1厘米；
文本阴影：0px 1px，1px 0px，1px 1px；
字体大小：粗体；
}
.阿凡达{
身高：100%；
宽度：100%；
边界半径：50%；
显示器：flex；
}
.可悬停{
位置：相对位置；
显示：块；
高度：150像素；
宽度：150px；
边框：0.05px实心#ccd0ce；
边界半径：50%；
}
.项目1{
垫面：5%；
}
.项目2{
左：3%；
字体系列：雷威；
}
.项目3{
左：5%；
}
.项目4{
显示：内联块；
位置：绝对位置；
右：0；
}
.卡体{
垫底：2%；
显示器：flex；
填充：2%；
}
.hr{
高度：1px；
背景色：#F2F2；
边界：无；
}
.表格管制{
背景色：透明；
颜色：#1d；
大纲：无；
轮廓样式：无；
轮廓偏移：0；
边界顶部：无；
左边界：无；
边界权：无；
边框底部：实心#e1e5e3 1px；
填充：3x10px；
宽度：55%；
高度：30px；
字体大小：20px；
字体系列：雷威；
}
.form控件[类型=文本]：焦点{
边框颜色：#1d；
}
.SearchTag{
背景色：透明；
颜色：#1d；
大纲：无；
轮廓样式：无；
轮廓偏移：0；
边界顶部：无；
左边界：无；
边界权：无；
边框底部：实心#e1e5e3 1px；
填充：3x10px；
宽度：55%；
高度：30px；
字体大小：20px；
字体系列：雷威；
}
.SearchTag[类型=文本]：焦点{
边框颜色：#1d；
}
.搜索框{
位置：固定；
宽度：100%；
}
.可折叠{
背景色：#fbfb；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.主动，
.可折叠：悬停{
背景色：#555；
}
.内容{
填充：0 18px；
显示：无；
溢出：隐藏；
背景色：#f1f1；
}
.btn{
背景色：#f9fdfb；
边界：无；
颜色：#B0；
填充：12px 16px；
字体大小：16px；
光标：指针；
}
.btn:悬停{
颜色：#1d；
}
.表格组{
位置：粘性；
顶部：2个；
}
.元素{
位置：相对位置；
最高：50%；
}

{{data.firstName.toUpperCase（）}{{data.lastName.toUpperCase（）}}
电子邮件：{{data.Email}

公司：{{data.Company}

技能：{{data.Skill}

平均值：{data.Average}}}%

测试{{i+1}}:{{marks}}%