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

HTML：CSS - 在固定定位元素下滚动内容？

<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>

DEMO： http://jsfiddle.net/JRnDz/

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

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

我曾尝试： 添加相对定位和顶部：50像素到容器：

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

来源

2013-02-12 RhymeGuy

你可以试试这个：

<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上方的锚点。

很明显，你会为第一和第三做同样的事情。

编辑：尝试简单地从你的UL

来源

2013-02-12 12:34:43 jpsnow72

试过了。和以前一样的效果。 – RhymeGuy 2013-02-12 12:42:17

ul是否需要修复？那是你的问题。我更新了你的jsfiddle – jpsnow72 2013-02-12 12:47:49

是的，它必须是固定的。 – RhymeGuy 2013-02-12 12:54:38

的由@ ipsnow72书面溶液除去固定的位置是更加清晰。

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

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

来源

2013-02-12 12:51:03

正如我重播ipsnow72答案：“它不工作”。所以它不是我的解决方案..至于jQuery，我会稍后添加它，现在我需要解决这个问题。 – RhymeGuy 2013-02-12 12:53:52

有了这个jQuery脚本，你可以解决你的问题。 – 2013-02-12 12:58:47

如何：

<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

来源

2013-02-12 13:02:03 jpsnow72

这要看什么用此代码，但如果添加

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

和娱乐有点z指标它的工作原理：http://jsfiddle.net/JRnDz/2/

来源

2013-02-12 13:35:13 Jan

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

回答

相关问题