从固定 header 偏移页面锚点
Offsetting page anchor from fixed header
我已经查看了有关此问题的其他帖子,但是 none 已经解决了,所以我在这里。
我试图让我的 header(位置固定)link 成为页面锚点,但是当我按下 link 时,它越过 [=19= 的顶部] 和它的 header。因此,要查看包括 header 在内的整个 div,您需要向上滚动。
.wrapper {
width: 100%;
height: 1000px;
margin: 130px auto;
padding: 0;
background-color: aliceblue;}
这是更新后的 fiddle:http://jsfiddle.net/pp9dg/28/
它使用 jquery 将锚点偏移 200px。
$(window).on("hashchange", function () {
window.scrollTo(window.scrollX, window.scrollY - 200);
});
您可以直接使用 CSS。只需制作独立的隐藏锚元素并将它们剪裁到 header.
的高度
这里是我用的锚class:
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
height:0px;
}
JSFiddle(我只做了前几个链接):http://jsfiddle.net/pp9dg/29/
我已经查看了有关此问题的其他帖子,但是 none 已经解决了,所以我在这里。
我试图让我的 header(位置固定)link 成为页面锚点,但是当我按下 link 时,它越过 [=19= 的顶部] 和它的 header。因此,要查看包括 header 在内的整个 div,您需要向上滚动。
.wrapper {
width: 100%;
height: 1000px;
margin: 130px auto;
padding: 0;
background-color: aliceblue;}
这是更新后的 fiddle:http://jsfiddle.net/pp9dg/28/
它使用 jquery 将锚点偏移 200px。
$(window).on("hashchange", function () {
window.scrollTo(window.scrollX, window.scrollY - 200);
});
您可以直接使用 CSS。只需制作独立的隐藏锚元素并将它们剪裁到 header.
的高度这里是我用的锚class:
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
height:0px;
}
JSFiddle(我只做了前几个链接):http://jsfiddle.net/pp9dg/29/