我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题，所以当你链接到页面其他地方的锚时，页面跳转，锚位于页面顶部，留下固定标题后面的内容(我希望这是有意义的)。我需要一种方法来抵消锚的25px从头部的高度。我更喜欢HTML或CSS，但Javascript也可以接受。
当前回答
用可链接id来提供导航栏高度的隐藏span标签怎么样?
#head1 {
padding-top: 60px;
height: 0px;
visibility: hidden;
}
<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>
这里是小提琴:http://jsfiddle.net/N6f2f/7
其他回答
对于@Jan的精彩回答，进一步的扭曲是将其合并到使用jQuery(或MooTools)的#uberbar固定头中。(http://davidwalsh.name/persistent-header-opacity)
我调整了代码，所以内容的顶部总是在固定标题下而不是在固定标题下，还添加了来自@Jan的锚，再次确保锚总是位于固定标题下。
CSS:
#uberbar {
border-bottom:1px solid #0000cc;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
a.anchor {
display: block;
position: relative;
visibility: hidden;
}
jQuery(包括对#uberbar和锚的方法的调整):
<script type="text/javascript">
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.85, topDistance = 30;
var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add events
topbarML();
$('#uberbar').bind('mouseenter',topbarME);
$('#uberbar').bind('mouseleave',topbarML);
inside = true;
}
else if (position < topDistance){
topbarME();
$('#uberbar').unbind('mouseenter',topbarME);
$('#uberbar').unbind('mouseleave',topbarML);
inside = false;
}
});
$('#content').css({'margin-top': $('#uberbar').outerHeight(true)});
$('a.anchor').css({'top': - $('#uberbar').outerHeight(true)});
})();
});
</script>
最后是HTML:
<div id="uberbar">
<!--CONTENT OF FIXED HEADER-->
</div>
....
<div id="content">
<!--MAIN CONTENT-->
....
<a class="anchor" id="anchor1"></a>
....
<a class="anchor" id="anchor2"></a>
....
</div>
也许这是有用的人谁喜欢#uberbar褪色dixed头!
改变位置属性的解决方案并不总是可能的(它会破坏布局)，因此我建议这样做:
HTML:
<a id="top">Anchor</a>
CSS:
#top {
margin-top: -250px;
padding-top: 250px;
}
用这个:
<a id="top"> </a>
为了减少重叠，设置font-size为1px。空锚将无法在某些浏览器中工作。
我在每个h1元素之前添加了40px-height .vspace元素。
<div class="vspace" id="gherkin"></div>
<div class="page-header">
<h1>Gherkin</h1>
</div>
CSS中:
.vspace { height: 40px;}
它工作得很好，空间也没有堵塞。
对于现代浏览器，只需将CSS3:target选择器添加到页面。这将自动应用于所有的锚。
:target {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
@AlexanderSavin的解决方案在WebKit浏览器中对我来说很棒。
另外，我不得不使用:target伪类，它将样式应用到选定的锚来调整FF, Opera和IE9中的填充:
a:target {
padding-top: 40px
}
注意，这种风格不适合Chrome / Safari，所以你可能不得不使用css-hacks，条件注释等。
我还想注意到，Alexander的解决方案工作，因为目标元素是内联的。如果你不想要链接，你可以简单地改变显示属性:
<div id="myanchor" style="display: inline">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>
