Question

我有一个响应式标题，我正在为一个站点工作，当你向下滚动时会变成一个固定位置的导航栏。它大约占据了页面的上四分之一。

页面内容是一系列divs /卡片，在您向下滚动时会向上滑动。

我想在导航栏中添加<a href>个链接，这些链接与id的{{1}}对应。但是，当我这样做时，div内容会移到页面顶部。

所以当我向div

发送信息时，我会得到以下内容

/localhost#first_card

当我真正想要的是这个时候：

---- TOP OF PAGE
[<div id="first_card"> begins here]


---- bottom border of navbar
[<div id="first_card"> continues here]

导航到---- TOP OF PAGE ---- bottom border of navbar [<div id="first_card"> begins here]后，有没有办法控制哈希链接在页面上的哪个位置呈现<div id="first_card">？

Answer 1

我一直试图在JSFiddle中为你解决这个问题，而且从我能找到的，最好的方法是将所有卡片装入一个单独的元素overflow:auto

可以在http://jsfiddle.net/Entoarox/TT2JN/

找到此结果，并作为其工作的证据

这可能不适用于您的网站，但唯一的选择是使用javascript来解决这个问题，我不能建议，因为它会导致访问者PC上的大量负载，因为大多数哈希相关的JavaScript功能要么是静态的，要么是非常新的，意味着要支持旧版浏览器，您需要手动轮询散列是否已更改，要么占用大量CPU时间，要么对散列更改时的响应速度非常慢。

Answer 2

尝试使用jQuery scrollTop（）命令。这将为您提供所需的精确定位。 http://api.jquery.com/scrollTop/

您可能需要稍微更改链接。使用jQuery和包装器div的示例：

<a id="first-card-jump" href="#first_card">Jump to First Card</a>

<div id="wrapper">
    NAVBAR
    first div
    second div
    ...
    nth div
</div>

<script>
    $('a#first-card-jump).on('click', function(event) {
        event.preventDefault(); // Not sure if this is needed
        $('div#wrapper).scrollTop(500); // you have to measure how far down you want to scroll
    });
</script>

请注意，这可能会破坏您的页内后退按钮支持。不确定这是否适合您。

P.S。如果您遇到麻烦，最简单的解决方法是为每个div增加一个上限，等于固定导航栏的高度。

希望这有帮助！

Answer 3

我让你jsfiddle 它使用padding-top创建顶部的偏移量，然后使用margin-bottom来移除元素之间的偏移量。

相关的css：

/*
add top padding and substract the same amount from bottom margin
*/

.card {
    padding-top: 200px;
    margin-bottom: -200px;
    position: relative;
}

/*
we need to reverse the stacking for this solution, so the elements later in
the document don't cover the elements before

either you know how many cards you have, so you can solve this in a central
css file (like below)
or you must add the stacking upon creation (in your template)
or use the javascript


starts from 2 because nav is :nth-child(1) in this example
*/
.card:nth-child(2){
    z-index: 0;
}
.card:nth-child(3){
    z-index: -1;
}
.card:nth-child(4){
    z-index: -2;
}

javascript使用jQuery来反转堆叠

$(function(){ //on load
    $('body>.card').each(function(i, elem){$(elem).css('z-index', -i)})
})

Answer 4

如果我理解你的问题，你想让div出现在页面中间，对吧？所以，要做到这一点，你可以直接将页面指向它上面的div。你也可以用固定的高度在它上面制作另一个div。

html5：链接到页面上某个点的div的#id

4 个答案: