Menu
I have a sticky header that floats over the rest of the page. When I link to page anchors, of course is scrolls so that the anchor is at the top of the page. However, when this happens the header covers up the text beneath.
Is there someway to fix this? I can't just move the anchor down because there are many of them on the page and each one has a different amount of text following. My first though was to somehow scroll to some height above the anchor.
Thanks, David
603
Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
You could add the scroll-padding-top CSS property to an HTML element with a value of 4rem . Now when you click the anchor link, the browser jumps to the anchor section but leaves padding of 4rem at the top, rather than scrolling the anchor point all the way to the top.
To add an anchor to a heading in HTML, add a <section> element with an id attribute. Don't use <a name> . Use lowercase for id values, and put hyphens between words. To add an anchor to a heading in Markdown, add the following code to the end of the line that the heading is on.
The :target pseudo element could be what you are looking for. With :target you can address the element that is pointed out with the #-mark. Read more about it here
165
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
