如果我在 HTML 页面中有一个非滚动标题,固定在顶部,具有定义的高度:
有没有办法使用 URL anchor (#fragment
部分)让浏览器滚动到页面中的某个点,但仍然尊重固定元素的高度 没有 JavaScript 的帮助?
http://example.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 | | ... | | ... | +---------------------------------+ +---------------------------------+
最佳答案
如果您不能或不想设置新类,请添加一个固定高度的 ::before
:target
的伪元素CSS 中的伪类:
:target::before {
content: "";
display: block;
height: 60px; /* fixed header height*/
margin: -60px 0 0; /* negative fixed header height */
}
或者使用 jQuery 滚动相对于 :target
的页面:
var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
关于html - 固定页眉与页内 anchor 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39458433/