Javascript 带有Div锚定标记的水平平滑滚动导航栏

我需要创建一个带有日期1800、1801、1802等的水平滚动导航条作为时间线

当我向下滚动时，我希望日期在导航栏内水平滚动，与我当前所在的div相关

日期还应充当导航栏中的链接，并平滑地垂直滚动到相应的div

我似乎无法让导航栏水平滚动，因为当我添加

overflow:hidden

到目前为止，我只有这些：

 <div class="navbar">
        <a href="#dag1">1839</a>
        <a href="#">1840</a>
        <a href="#">1841</a>
        <a href="#">1842</a>
        <a href="#">1843</a>
        <a href="#">1844</a>
        <a href="#">1845</a>
        <a href="#">1846</a>
        <a href="#">1847</a>
        <a href="#">1848</a>
        <a href="#">1849</a>
        <a href="#fact1">1861</a>
        <a href="#brownie1">1900</a>
        <a href="#polaroid1">1948</a>
        <a href="#konica1">1978</a>
        <a href="#kodak1">1991</a>
        <a href="#canon1">2005</a>

---

这里可以看到一个例子：

如果是您想要的粘性导航，它就在那里

ul {
 position:fixed; /* sticky part */
 width:33%;
}

li {
 float:left;
 margin-left:1%;
 list-style-type:none;
 padding:4%;
 border:1px solid black;
 background-color:#999;
}

---

链接已断开。找不到页面

ul {
 position:fixed; /* sticky part */
 width:33%;
}

li {
 float:left;
 margin-left:1%;
 list-style-type:none;
 padding:4%;
 border:1px solid black;
 background-color:#999;
}