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

Anchor Link With Two Fixed Navigations - Complex

本文关键字：导航 链接 复杂 两个      更新时间：2023-09-26

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

这个分页有锚链接，链接到页面上的不同部分！然而，当你点击链接时，它涵盖了两个固定浮动元素的内容。

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

如果向下滚动，您将看到分页附加到标题导航！然后，如果你点击分页中的"A"，你就会看到会发生什么！内容被覆盖了！(A是唯一能在atm上工作的链接，抱歉(。

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

感谢

以下是JavaScript解决此问题的方法。首先，将head链接中的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);
    });
});

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

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

相关文章：