Как скрыть переполнение прокрутки после определенной позиции

Я пытаюсь создать полосу прокрутки с прикрепленным заголовком

Поскольку у меня есть отступ, смещающий заголовок боковой панели вниз, это означает, что когда я прокручиваю страницу достаточно далеко вниз, текст начинает появляться над ним. В идеале я бы хотел, чтобы это оставалось скрытым, как только оно достигает закрепленного заголовка

Одним из найденных мной решений было удаление свойства overflow-y из боковой панели и добавление его в класс для содержимого боковой панели, что исправляет это, но заставляет полосу прокрутки появляться внутри боковой панели, что не идеально

Есть ли простое и элегантное решение, которое я здесь упускаю? Похоже, это распространенная проблема

.sidebar {
    width: 240px;
    background-color: #f1f2f7; 
    padding: 20px;
    border-right: 1px solid #ccc; 
    overflow-y: auto; 
}

.sidebar-header {
    position: sticky;
    top: 0; 
    background-color: #f1f2f7; 
    display: flex;
    justify-content: space-between; 
    align-items: center; 
}

.sidebar-content {
    position: relative;
    top: 0;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}