Wordpress Anchor链接调整固定标题的边距

时间:2013-09-06 18:55:12

标签: html css wordpress fixed

我有一个带有固定标题的Wordpress网站。 我的内容页面根据客户的要求使用锚链接。 单击锚链接时,页面将加载内容从固定标题后面开始。我需要找到一种方法来为固定标题的高度设置一个永久边距。

此处示例: http://www.zachkeller.net/cp_site/approach/#insights

目前,在我的WP文本编辑器中,我已将此html设置为部分标题:

<div id="method">
<div class="sectionheader">
<h1 class="sectiontitle">method</h1>
</div>
Consensus Point works with research organizations and large institutions to elicit knowledge from communities to predict future outcomes and preferences.  Our unique market algorithm, gaming techniques, and social platform provide a more engaging way for consumers and experts to be rewarded for their performance and participation.
<p style="text-align: center;"><a href="http://www.zachkeller.net/cp_site/wp-content/uploads/2013/08/how_to_play.jpg"><img class="aligncenter size-full wp-image-229" alt="How to play" src="http://www.zachkeller.net/cp_site/wp-content/uploads/2013/08/how_to_play.jpg" width="661" height="172" /></a></p>
Our platform, Huunu, is different from traditional research in that respondents are not forced to answer any questions and are able to weight their answers based on their confidence.  It is the process of self-selection and weighting based on confidence that gives the market its accuracy.
</div>

1 个答案:

答案 0 :(得分:1)

你愿意使用一些jQuery吗?

http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

在设置我自己的固定标头时,我最终使用了这种技术。主要有两个原因:

1)iOS支持。位置:固定支持在iOS设备上并不存在。

2)您可以指定偏移量来完全解决您遇到的问题。

如果你不想使用jQuery。 CSS唯一的解决方案是为您的锚链接分配一个类。

<a class="offset"></a>

a.offset{
    display: block;
    position: relative;
    top: -125px; //at least the negative height of your header
    visibility: hidden;
}