I have been working on creating a navbar that will scroll down upon clicking a button. Everything seems to be functioning correctly, except for one issue that I can't seem to figure out. The problem is that when my sticky navbar is clicked while at the bottom or middle of the page, it appears at the top of the webpage instead of staying in its current position.
What I am aiming for is for the navbar to behave like the buttons in each navbar on stackoverflow - no matter where on the page they are clicked, the corresponding menu should be displayed.
Here is a snippet of the CSS code I have been using:
#btndiv
{
background-color: red;
height: 56px;
position: sticky;
top: 0px;
z-index: 2;
}
#mobilemenu
{
display: none;
background-color: whitesmoke;
position: absolute;
width:100%;
}
#mobilelinks
{
display: block;
text-align: center;
}
#mobilelinks a
{
display: block;
margin: 8px;
}
.innerdiv
{
margin: 12px;
}
.links
{
float: left;
}
.links a
{
padding: 12px;
margin: 0px 12px;
text-decoration: none;
color: black;
font-size: 1em;
cursor: pointer;
}
.links a:hover, .links a:focus
{
text-decoration: underline;
}
You can view the progress I've made so far by following this link: https://jsfiddle.net/mahajaved/cans5qe0/16/