As a result of using a fixed navbar, when navigating to an in-page reference (i.e., fragment), the target of the reference disappears underneath the navbar. We need to address this problem.
There are two ways to solve this problem:
- Add extra padding to the top of the target to compensate for the navbar height.
- Use a script that responds to an in-page navigation and corrects the scroll offset accordingly.
The problem with solution (1) is that it's extremely invasive to the design. It works okay for section titles, which already have top padding. However, handling inline elements requires sophisticated layout hacks. Since AsciiDoc offers the ability to link to an anchor almost anywhere, this is simply not a viable solution.
- query the anchors for all in-page references (i.e., an
hrefthat begins with
- bind a click handler that overrides the default behavior and handles jumping to the anchor (i.e., target)
- gracefully ignores any in-page references that cannot be resolved
- responds to the page load event and jumps to the anchor corresponding to the fragment requested in the URL*
* It's necessary to use the load event instead of the DOMContentLoaded since the jump offset cannot be accurately calculated until the page is fully loaded.