【问题标题】:Wordpress Anchor links adjust margin for fixed headerWordpress 锚链接调整固定标题的边距
【发布时间】:2013-09-10 23:03:09
【问题描述】:

我有一个带有固定标题的 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>

【问题讨论】:

    标签: html css wordpress fixed


    【解决方案1】:

    你愿意使用一些 jQuery 吗?

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

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

    1) iOS 支持。 position:fixed 支持在 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;
    }
    

    【讨论】:

    • 我正在尝试将该插件添加到 WP,但我遇到了墙。
    • 您可以提供任何详细信息以帮助解决问题吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-24
    • 2012-02-21
    相关资源
    最近更新 更多