Question

我需要为时间轴创建一个粘贴的水平滚动导航栏，其日期为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>

和CSS：

.navbar {
    list-style-type: none;
    width:100%;
    height:75;
    position:fixed;
    top:0;
    text-decoration: none;
    float:left;
    overflow: hidden;
}

这里可以看到一个例子：https://duffy.com/30-years/

Answer 1

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

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;
}

http://codepen.io/Unkn0wn96/pen/xRJPgp

带有Div锚标签的水平平滑滚动导航栏

1 个答案: