Menu
I have a topbar with position:fixed which also contains anchor links (<a href="#someid">jdjd</a>).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
697
The anchor is outlined in blue. You can see here how the section before the anchor is properly behind the fixed header, and the anchor is positioned just under it as if the top of the page starts just at the header’s bottom edge. We can make this happen with a little CSS trick.
In Tailwind CSS, you can easily implement a fixed top NavBar by using the fixed and z-index utilities, like so: Note: If you’re using Safari, this demo video might not work nicely or not start at all.
When you click on a link to an anchor further down the page, it scrolls so the anchor is now at the very top of your window…behind the nav header that, of course, has remained at the top of the screen. This is a common issue that you often see unaddressed even on some very popular websites.
How TO - Fixed Sidebar Step 1) Add HTML: Example <!-- Side navigation --> <div class="sidenav"> <a href="#"> About </a> <a href="#"> Services... Step 2) Add CSS: Example /* The sidebar menu */ .sidenav { height: 100%; /* Full-height: remove this if you want "auto"... W3.CSS Tutorial
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
