Javascript 固定标题和锚链接：如何减少可点击区域？

我正在使用JavaScript从HTML文本页面自动创建脚注。JS代码基于以下示例：（德语描述）。脚本基本上收集了文本中由

标记的所有元素，在页面底部为脚注解释创建了一个

div

元素，并向文本中的脚注锚添加了一个反向链接。其结果可与维基百科的脚注系统相媲美。JS脚本在我根据自己的需要进行调整后基本上可以正常工作

在我的页面顶部，我使用了一个固定的标题。为了使锚链接可见，我使用以下CSS将类

fnheader

添加到由JS脚本创建的

a

标记中：

a.fnheader {    
    position:relative;
    margin-top:-150px;
    padding-top:150px;
    visibility:none;
    }

我通常更喜欢给出的解决方案，但是

display:block

不适用于脚注（它们都排列在页面左侧，但不再在文本中），上面的CSS适用

因此，标题不再隐藏锚链接。但是现在的问题是CSS添加的150像素的填充。当我在课文中遇到这样的情况时

bla blah blah bla bla blah bla blah blah
bla bla bla blah [1] bla blah bla blah
bla bla bla bla [2] blah bla blah bla

其中和[2]表示脚注，单击可进入脚注[2]的说明，因为[2]链接的顶部填充已延伸到脚注行。脚注链接仅在指向脚注上方行中的相应位置时才可单击。我认为问题很清楚

有没有办法减少脚注链接的可点击区域（最好是CSS）？还是有人有更好的办法解决固定头的问题

提前感谢您对此的任何建议

编辑：一些额外的信息以使问题更清楚：样式

fnheader

通过JS脚本应用于文本中的脚注。它向链接添加一个150像素的填充顶部，以便将其向下移动到页面顶部的固定标题。这会导致在单击时出现[2]的脚注说明，因为填充还将脚注的可单击链接区域扩展到前一行

不幸的是，我不能在这里提供任何代码

编辑2:我刚刚在文本中的脚注上应用了一个1像素的实心边框，以便从视觉上了解问题所在。这就是它看起来的样子：

---

如您所见，顶部填充扩展到顶部（如预期的那样），以通过页面顶部的固定标题。这将导致可点击区域扩展到前面的行以及文本中的其他脚注（如屏幕截图所示）。

150px将内容向下推过固定的页眉，但这与页脚中的链接有什么关系？它们是包含fnheader标记的克隆吗？你能给页脚添加一个样式来删除页脚上的填充和边距吗？共享一些代码或链接？在上面的示例中，标题应用于文本中的脚注链接（即[1]、[2]…）。150px的填充扩展了脚注的可点击区域，因此点击[1]可以进入[2]的脚注描述。150px将内容向下推过固定页眉，但这与页脚中的链接有什么关系？它们是包含fnheader标记的克隆吗？你能给页脚添加一个样式来删除页脚上的填充和边距吗？共享一些代码或链接？在上面的示例中，标题应用于文本中的脚注链接（即[1]、[2]…）。150像素的填充扩展了脚注的可点击区域，因此点击[1]可以进入[2]的脚注描述。