1

我正在尝试查看是否有任何方法可以使用 CSS 和 Gumby Frameworks 的“跳过链接”锚链接解决方案来调整固定位置标题。

我尝试以负边距向下推图层，并尝试使用 CSS 定位数据类型属性，但无济于事。到目前为止，我尝试过的所有操作也都在页面本身上移动了 div。

我的标题的固定高度为 682 像素，我想找到一种方法将所有内容保持在该高度以下并让跳过链接功能仍然有效。

任何建议将不胜感激！

示例链接

标题 CSS：

body {
    padding-top:268px !important;
}

.fixed_header {
    width: 100%;
    height: 268px;
    background: url(../img/green_header_grad.png) repeat-x;
    ;
    position: fixed;
    text-align: center;
    z-index: 999;
    border-bottom: 1px solid #FEFEF4;
    -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    top: 0px;
}
4

3 回答 3

1

更改正文的边距值或插入偏移量以匹配固定的标题高度只是第一步。

似乎可行的方法是将数据类型属性移动到您要跳到的图层内的跨度内。然后跨度需要一个绝对位置，然后需要应用一个负值或偏移量来匹配标题（-286px）：

HTML：

<div class="four columns sidebar"">
<span class="anchor" id="founder" data-type="skiplink_3"></span>
</div>
<div class="eleven columns main_col"></div>
</div>

CSS：

span.anchor {
position:absolute;
top: -268px;
display: block;
visibility: hidden;
}
于 2013-01-26T15:00:33.027 回答
1

margin-top: -268px;从span.anchor（style.css 第 149 行）中删除，例如：

span.anchor {
    display: block;
    height: 268px;
    visibility: hidden;
}
于 2013-01-26T14:05:52.090 回答
1 
body {
    padding-top:234px;
}
于 2013-01-20T02:47:39.700 回答