CSS - 在固定定位元素下滚动内容？答案

【问题标题】：CSS - Scroll content under fixed positioned element?CSS - 在固定定位元素下滚动内容？
【发布时间】：2013-01-27 18:09:54
【问题描述】：

HTML：

<div id="container">
    <ul>
        <li><a href="#first">first</a></li>
        <li><a href="#second">second</a></li>
        <li><a href="#third">third</a></li>
    </ul>
    <div id="somecontainer">
        <div id="first">
        </div>
        <div id="second">
        </div>
        <div id="third">
        </div>
    </div>
</div>

演示： http://jsfiddle.net/JRnDz/

问题： 当您单击名为“second”的链接时，页面应跳转到 id 为“second”的 div。但是，它不会显示整个 div，而只会显示其中的一部分（150px-50px=100px）。 div 的顶部被切断。

问题： 点击“第二个”链接后如何显示整个div？

我的尝试： 给容器添加相对定位和top:50px：

#container {
  position: relative;
  top: 50px;
}

【问题讨论】：

标签： css scroll position css-position

【解决方案1】：

你可以试试这个：

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondJump">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondJump"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

将要跳转到的位置作为锚点放在要跳转到的 div 上方。

显然你会为第 1 次和第 3 次做同样的事情。

编辑：尝试简单地从您的 ul 中删除固定位置

【讨论】：

试过了。效果和以前一样。
ul需要修复吗？那是你的问题。我更新了你的 jsfiddle

【解决方案2】：

@ipsnow72 写的解决方案比较清楚。

如果您愿意，可以使用 jquery 的插件 ScrollTo 并使用 offset 参数。 http://demos.flesler.com/jquery/scrollTo/

$(...).scrollTo( '#yourelement', {offset:-50} );

【讨论】：

当我重播到 ipsnow72 时回答：“它不起作用”。所以它对我来说不是解决方案.. 至于 jQuery，我稍后会添加它，现在我需要解决这个问题。

【解决方案3】：

这个怎么样：

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondAnchor">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondAnchor" style="padding-top: 50px; margin-top: -50px;"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

见：Fixed position navbar obscures anchors

【讨论】：

【解决方案4】：

这要看这段代码有什么用，不过如果加了

#someconteiner div{
    padding-top:50px;
    margin-bottom:-50px;
    position:relative;
    display:block;
}

并使用 z-indexes 进行一些操作：http://jsfiddle.net/JRnDz/2/

【讨论】：