Topic: fixed navbar's inner link not scroll correcty
not a question, I'lll post answer by myself, maybe can help someone.
problem: when use fixed navbar to jump to the inner link, you'll find it's not scroll right place.
navbar part:
<ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link waves-light" href="#latestPart" mdbRippleRadius>latest<span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link waves-light" href="#historyPart" mdbRippleRadius>history</a> </li> <li class="nav-item"> <a class="nav-link waves-light" href="#aboutPart" mdbRippleRadius>about</a> </li> </ul>
latest part:
<div id="latestPart" class="container">
when you click history, then click latest to come back, you'll find right scroll not at the top.
Add comment
you should give some css trick to the latest part:
3rem just a height >= header height
#latestPart:before {
display: block;
content: " ";
margin-top: -3rem;
height: 3rem;
visibility: hidden;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No
Tags