我正在写一个词汇表页面.我在页面顶部有字母链接.我希望保持页面顶部(包括字母链接)固定,同时单击带有定义的页面部分,按字母顺序向上/向下滚动.
我的HTML看起来有点像这样:
<html>
<head><title>My Glossary</title></head>
<body>
<div id="top">
<a href="#A">A</a> |
<a href="#B">B</a> |
<a href="#Z">Z</a>
</div>
<div id="term-defs">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... -->
</dl>
</div>
</body>
</html>
[编辑]
我试图创造的效果类似于这里的效果.不同之处在于,在链接的示例中,页面滚动是在用户单击类别时完成的.就我而言,我想在点击页面顶部的索引(即字母表)时滚动页面.
Mit*_*ers 79
是的,有很多方法可以做到这一点."最快"的方法是将div添加到div中,类似于以下内容
#term-defs {
height: 300px;
overflow: scroll; }
这将强制div可滚动,但这可能无法获得最佳效果.另一种方法是绝对修复顶部物品的位置,你可以通过做这样的事情来玩这个.
#top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
}
这将把它固定在顶部,在其他内容之上,高度为23px.
最终的实施将取决于您真正想要的效果.
小智 17
你可以这样做:
<html>
<head><title>My Glossary</title></head>
<body style="margin:0px;">
<div id="top" style="position:fixed;background:white;width:100%;">
<a href="#A">A</a> |
<a href="#B">B</a> |
<a href="#Z">Z</a>
</div>
<div id="term-defs" style="padding-top:1em;">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... ->
</dl>
</div>
</body>
</html>
这是位置:修复这是最重要的,因为它从正常页面流中获取顶部div并将其固定在它的预定位置.使用padding-top:1em也很重要,否则术语-deds div将从顶部div开始.当它们在顶部div下滚动时,背景和宽度将覆盖term-defs div的内容.
希望这可以帮助.
小智 6
你可以简单地修复顶部div:
#top { position: fixed; top: 20px; left: 20px; }