锚点定位

时间:2012-02-17 21:50:45

标签: html css wordpress

我有一个使用Wordpress垂直滚动' parallax '类型主题创建的长垂直网站。所有内容区域都是通过“帖子”创建的 - 帖子标题是H1。

我在页面顶部创建了一个粘性菜单,调用我在帖子标题中设置的锚点,以便在定位时获得最高的准确度。 例如下面。

<a name="ebook"></a>Ebook

这不起作用,因为它现在滚动到仅显示一半内容的点,因为我的粘性菜单覆盖了我设置锚点的标题区域。所以它向下滚动,菜单覆盖了一半的内容。

所以,我想如果我将一个类分配给我的锚点并将其限制在大约200px以使锚点滚动到内容恰到好处。这也不起作用。 例如

 <a name="ebook" class="anchor"></a>Ebook

有人能引导我解决这个问题吗?我需要将我的主播定位在我的Wordpress帖子/内容区域上方大约200px,以使内容显得很好。

(我已经在使用smoothscroll.js来创建锚点之间的平滑过渡,而不想实现额外的或不同的JS /我正在寻找CSS解决方案。)< / em>的

1 个答案:

答案 0 :(得分:1)

有点不清楚(一个例子本来不错),但如果我理解正确的话,我想我过去也有类似的问题。 <a>将始终跳转到页面顶部,因此如果您有一个粘性导航,它将涵盖<a>信息(我认为这是您在第一个中所说的内容的一部分)实例)。我不确定你为什么觉得你需要200px(目前还不清楚)。

但是,我会这样做:block标记上设置inline-blockpadding-top显示和<a>,至少等于粘性导航的高度。这样做会使a的顶部仍然位于页面顶部,但允许文本被降低。然后,您可以从a底部的任何距离定位内容。

示例:http://jsfiddle.net/6zAYw/6/