Anchor transition overlaps sticky element?

Question

css

Hello. But don’t tell me, I have an anchor element, but there is also a sticky menu, and when there is a transition to this anchor, this menu is not taken into account and partially overlaps the anchor element.
It's the same with the standard form validation, when it rushes to an invalid element, the menu is not taken into account. Is it possible to fix this somehow?

<main>
 <nav class="menu">
  <a href="#bottom">Bottom</a>
 </nav>
...
  <div id="bottom"><b>BOTTOM</b></div>
...
</main>

main {
 max-width: 300px;
}

.menu {
  background-color: #eee;
  position: sticky;
  top: 0;
}

#bottom {
 background-color: red;
 padding: 16px;
}

Thank you.

Answer 1

If a standard transition is used - only with all sorts of hacks, such as increasing the element up by the size of the fixed plate, visually leaving it as it is.

Answer 2

An epic life hack for such a thing - put anchors not with IDs but with tags and then move them to the height of a sticky cap
<a name="...">

$(window).on('load resize orientationchange', function () {
$('a[name]').css({
  "top":"-" + $('header').height() + "px"
});
});