我的旋转木马项目中有一个h1标题，我想在滚动时修正该标题的位置

Question

我有一个包含标题agenda-date-heading的轮播。我希望这个标题在滚动时固定。现在它没有得到修复。类top中css的fixed-position属性仅更改其在滚动上的位置，而不是实际修复它。关于如何获得我计划到达的目的的任何建议？

<div class="container-fluid clearfix" style="padding-left:0; padding-right:0;">
    <div id="left-side" class="agenda-container">
        <div id="agenda-date-container" class="carousel slide" data-ride="carousel" data-interval="false">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active agenda-date" id="dec12">
                    <h1 class="text-center agenda-date-heading">December 12</h1>
                </div>
                <div class="carousel-item agenda-date" id="dec13">
                    <h1 class="text-center agenda-date-heading">December 13</h1>
                </div>
                <a class="carousel-control-prev" href="#agenda-date-container" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#agenda-date-container" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

这是我想要实施的内容的css

.fixed-position {
    width: 50%;
    position: fixed;
    top:20%;

}

#dec12 {
    background-color: #0081c8;
}

#dec13 {
    background-color: #0b8400;
}

.agenda-date {
    color:white;
    font-size: 2em;
    line-height: 2em;
    margin:auto;
}

#agenda-date-container>.carousel-inner>.carousel-item {
    height:40em;
}

.agenda-container {
    width:50%;
    position: relative;
    margin:0;
}

.agenda-date-heading {
    width:100%;
    height:20%;
    padding-top:50%;
    padding-bottom:20%;
}

这是我的jquery

var dateOffsetY = $('#agenda-date-container').offset().top;

function dateOffsetScroll(){
    if($(window).scrollTop()>=dateOffsetY) {
        $('.agenda-date-heading').addClass("fixed-position");
    }else {
        $('.agenda-date-heading').removeClass("fixed-position");
    }
}

document.onscroll = dateOffsetScroll;