javascript - 具有两个固定导航的锚链接 - 复杂

Question

基本上我有一个固定的标题，里面有一个导航，它总是附加到窗口的顶部。然后我有另一个固定元素，它是一个分页，但它只在滚动到窗口时将其自身附加到窗口的顶部！

此分页具有链接到页面上不同部分的锚链接！但是，当您单击链接时，它会覆盖两个固定浮动元素的内容。

这是示例： http: //www.chudz.co.uk/test/

如果向下滚动，您将看到分页附加到标题导航！然后，如果您单击分页中的“A”，您将看到会发生什么！内容被覆盖！（抱歉，A 是唯一有效的链接）。

有人知道我可以使用的解决方案吗？

谢谢

Answer 1

您的固定分页不占用 dom 中的任何空间。

您应该使用“id”而不是“name”，然后将一个类添加到锚点，将其绝对定位并以负边距向上移动（与分页的高度相同）。这将确保锚点从分页下方开始。

Answer 2

这是针对此问题的 JavaScript 解决方法。首先，像这样在头链接中将 name 属性更改为 id 属性。

<h2><a id="a">Authors - A</a></h2>

然后将此脚本添加到您的底部脚本中。

$(document).ready(function(){
    $("#pagination a").click(function(event){ 
        event.preventDefault();
        var o =  $( $(this).attr("href") ).offset();   
        var sT = o.top - 151; // 151 is the header height + navigation height 
        window.scrollTo(0,sT);
    });
});