divアンカー付き水平スムーススクロールナビバータグ

Question

タイムラインの日付が1800,1801,1802などのスティッキな水平スクロールナビゲーションバーを作成する必要があります。

私が下にスクロールすると、現在のdivに関連するnavbar内で日付が水平にスクロールされます。

日付は、ナビゲーションバーのリンクとしても機能し、対応するdivに垂直に滑らかにスクロールする必要があります。

私はこれは私がこれまで持っているすべてであるoverflow:hidden

を追加したとき、私は日付だけでWebページをオフに実行するとナビゲーションバーは、水平方向にスクロールするように見えることはできません。

<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