固定页面标题重叠
如果我在HTML页面中有一个非滚动标题，将其固定在顶部，并具有定义的高度：
有没有一种方法可以使用URL锚点（ #fragment部分）让浏览器滚动到页面中的某个点，但仍然在没有JavaScript帮助的情况下尊重固定元素的高度？
http://foo.com/#bar
WRONG (but the common behavior): CORRECT: +---------------------------------+ +---------------------------------+ | BAR///////////////////// header | | //////////////////////// header | +---------------------------------+ +---------------------------------+ | Here is the rest of the Text | | BAR | | ... | | | | ... | | Here is the rest of the Text | | ... | | ... | +---------------------------------+ +---------------------------------+
我有同样的问题。 我通过向顶点高度作为填充顶部值的锚元素添加一个类来解决此问题。
<h1><a class="anchor" name="barlink">Bar</a></h1>
然后简单的CSS：
.anchor { padding-top: 90px; }
如果你不能或不想设置一个新的类，在CSS：
:target:before {
content:"";
display:block;
height:60px; /* fixed header height*/
margin:-60px 0 0; /* negative fixed header height */
}
或jQuery：
var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
我使用这种方法：
/* add class="jumptarget" to all targets. */
.jumptarget::before {
content:"";
display:block;
height:50px; /* fixed header height*/
margin:-50px 0 0; /* negative fixed header height */
}
它在每个目标之前添加一个不可见元素。 它适用于IE8 +。
以下是更多解决方案：http：//nicolasgallagher.com/jump-links-and-viewport-positioning/
链接地址: http://www.djcxy.com/p/88999.html