Bootstrap 4 - 使用粘性标题调整抽屉菜单高度和偏移量？

如何解决Bootstrap 4 - 使用粘性标题调整抽屉菜单高度和偏移量？

我正在尝试更改移动导航栏抽屉的位置。

导航栏上方有一个高度为 30 像素的容器。导航栏的高度为 58 像素。一旦用户开始滚动，顶部 30 像素的容器就会滚动出视口（粘性导航栏）。

如果用户滚动并且导航栏变得“粘滞”，我如何调整抽屉的大小以补偿额外的 30 像素高度？

滚动前：

滚动后：

相关 CSS：

@media (max-width: 992px) {
.navbar-collapse {
    position: fixed;
    top: 58px; <--Not Sticky
    top: 87px;  <--Sticky
    left: 0;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 15px;
    width: 75%;
    height: 100%;
}

.navbar-collapse.collapsing {
    left: -75%;
    transition: height 0s ease;
}

.navbar-collapse.show {
    left: 0;
    transition: left 300ms ease-in-out;
}

.navbar-toggler.collapsed ~ .navbar-collapse {
    transition: left 500ms ease-in-out;
}
}

/* Sticky Nav */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}