Looking to design a unique sticky horizontal scrolling navigation bar for displaying dates like 1800, 1801, 1802, etc. as part of a timeline project.
The idea is to have the dates scroll horizontally within the navbar while I scroll down the page, aligning with the specific section I am viewing.
In addition, each date should function as a link in the navbar, smoothly scrolling vertically to the corresponding section on the page.
However, I'm facing an issue where the dates overflow off the webpage when adding overflow:hidden to achieve this effect.
Here's what I've managed to do so far:
<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>
And here's the CSS:
.navbar {
list-style-type: none;
width:100%;
height:75px;
position:fixed;
top:0;
text-decoration: none;
float:left;
overflow: hidden;
}
You can take a look at a similar example here: