Bootstrap 4 spyscroll返回顶部后未突出显示第一个导航栏项

Question

我制作了一个带两行的.container。最左边的列包含spyscroll导航栏，右边的列包含应遵循的文本。加载页面时，第一个项目在导航栏上突出显示，并且突出显示使我跟随着我的sticky-top导航栏在页面上向下导航，然后向上备份，直到我滚动回到第一项

因此，当我滚动回到顶部时，我希望第一项保持突出显示，但不是。

我添加了：

body {
    position: relative;
}

此外，我正在使用

通过JQuery更改项目的文本

$('#text1').text

    <div class="container-fluid">
        <div class="row">
            <div class="col-2">
                <nav id="projectListNavbar" class="navbar navbar-light bg-light sticky-top">
                    <a class="navbar-brand" href="#">Project List</a>
                    <nav class="nav nav-pills flex-column ">
                        <a class="nav-link" href="#item-1">Arduino Plantr</a>
                        <a class="nav-link" href="#item-2">julianlehrer.me</a>
                        <a class="nav-link" href="#item-3">wscrape.io</a>
                    </nav>
                </nav>
            </div>
            <div class="col-10">
                <div data-target="#projectListNavbar" data-offset="0" data-spy="scroll">
                    <h4 id="item-1">Arduino Plantr</h4>
                        <p id="text1"></p>
                    <br>
                    <h4 id="item-2">julianlehrer.me</h4>
                        <p id="text2"></p>
                    <h4 id="item-3">wscrape.io</h4>
                        <p id="text3"></p>
                </div>
            </div>
        </div>

我希望当我滚动回到页面顶部时，高亮显示将停留在第一项上，但是不会。