如何创建固定页眉和滚动内容区

时间:2011-04-18 作者:Diventare Creative

我正在一个网站上做实验。我的客户希望标题的导航和徽标保持不变,因此访问者在滚动阅读页面内容时始终能够访问导航栏。我已添加fixed 到我的包装纸div 这使背景保持静态,但在本设计中,背景也是标题的一部分。

我的页面是http://axiomwest.com/client-services/

如何实现固定的标题区域并只允许在主内容区域中滚动?

1 个回复
最合适的回答,由SO网友:Drew Gourley 整理而成

好的,这里需要做的是将标题分离到它自己的包装中。我所做的是在关闭#header div之后立即关闭#wrapper div,并使用相同的类hfeed和除wrapper之外的新ID启动一个新div。

应如下所示:

<div class="hfeed" id="wrapper">
    <div id="header">
        <div id="logo">...
        (stuff in here)
    </div><!-- #header -->
</div>
<div class="hfeed" id="wrapper-lower">
    <div id="main">
        <div id="container">...
        (so on, so forth)
现在,如果将position:fixed应用于#wrapper元素,将获得所需的效果。你仍然需要改变你的图形工作方式来真正销售效果。我可能建议使用。巴布亚新几内亚,swoosh标志红线下的一切都是透明的。文件大小会大得多,但如果这是您正在使用的唯一一个大图像,您就可以了。

差点忘了!您还需要对#wrapper lower应用顶部填充,以便将其向下推过固定元素。#wrapper lower的填充顶部应与#header的总高度相同。

结束

相关推荐