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

基本上我有一个固定的头部，其中有一个导航，它总是附着在窗口的顶部。然后我有另一个固定的元素，它是一个分页，但它只有当它滚动时才将它自己附着到窗口的顶部！具有两个固定导航的锚链接 - 复杂

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

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

如果向下滚动，你会看到分页自身附着到页眉导航！然后，如果您在分页中点击“A”，您将看到会发生什么！内容被覆盖了！（A是唯一可以使用atm的链接）。

任何人都知道我可以使用的解决方案？

感谢

来源

2013-02-25 Chudz

下面是针对此问题的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); 
    }); 
});

来源

2013-02-25 16:01:56 Derek

工作正常！唯一的问题是当分页没有设置为固定之前滚动到如果有人点击B内容仍然隐藏。任何想法如何解决这个问题？ – Chudz 2013-02-25 16:16:10

您会详细说明并更新您的测试页吗？所以我会试一试。 – Derek 2013-02-25 16:24:48

对不起，德里克，它只是有时我做了破坏它的CSS我现在修复它的工作现场感谢！ – Chudz 2013-02-26 12:01:25

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

您应该使用的，而不是“名称”“身份证”，然后添加一个类锚，它绝对位置和阴性切缘（同为分页的高度）向上移动。这将确保锚点在分页下方开始。

来源

2013-02-25 15:43:09 Alex

为什么在使用CSS soloution时使用脚本来解决这个问题？只需添加一个类到你的主播风格：边距：-151px – Alex 2013-02-25 16:27:07

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

回答

相关问题