更重要的是，代码优雅降级，使网站的设计实现的更加完美。下面是一个demo示例，仅供参考，我是复制 粘贴的，版权归原作者：
HTML代码
在HTML中，这个例子是非常简单的，我们只需要的是一个H1和header标签。下面再加一张图片来测试页面滚动的效果。
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery代码
CSS过渡是处理我们粘头的动画部分的最佳方式。所以我们使用jQuery来检测窗口的滚动位置。 当窗口的滚动位置大于1，这意味着用户向下滚动，那么我们要添加’stycky’类中的header 否则，我们就删除它（如果它存在）。
这些都意味着我们能把头部的样式应用在基于’stycky’的类中。
$(window).scroll(function() {
if ($(this).scrollTop() >1){
$('header').addClass("sticky")
}
else{
$('header').removeClass("sticky")
}
})
需要注意的一点是，以这种方式使用jQuery的优雅降级（graceful degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复）如果禁用JavaScript，导航仍然可以工作，但是顶部只会使用非粘性的默认状态样式。
CSS代码
我们用CSS来样式化两种不同的状态，默认状态，和粘性状态并在两种状态之间转换。
首先，添加一些简单的样式，改善头部的外观：
header {
position : fixed
width : 100 %
text-align : center
font-size : 72 px
line-height : 108 px
height : 108 px
background : #335C7D
color : #fff
font-family : 'PT SANS“
}
现在到了有趣的部分：当用户向下滚动，’sticky‘类将会被应用，我们现在可以用顶部风格的不同来反映新页面上的优先级。我们还可以设置位置固定，以便当页面滚动时不会改变定位。
还有几件事情我们可能要做：第一，我们要改变字体大小，以便它使用更少的屏幕空间；第二改变背景颜色和对齐到左边，这样在视觉上不会过多干扰：
header .sticky {
font-size : 24 px
line-height : 48 px
height : 48 px
background : #efc47D
text-align : left
padding-left : 20 px
}
当然，你改变什么样式取决于你想要达到的前端设计。你可以改成任何你喜欢的样式。
如果你现在测试一下，你会看到当我们向下滚动时标题在变化。
现在，头部动态的变化需要我们设置一个过渡，像这样：
transition: all 0.4s ease
把.header里的background-repeat:no-repeat改成repeat-x这就是横向平铺。还有可以做背景大小。
在.header里加上一句：background-size:100% 100%分别代表宽，高，这是CSS3，所以旧版本IE不支持。这100%可以是固定像素，也可以是相对的EM，也可以是百份比。
在div+css布局中，一般都像下面这样来整体构架的：<div id="header"></div>
<div id="center"></div>
<div id="footer"></div>
对于header部分，肯定要显示网站标题，除了显示网站标题外，还可能要显示其他比较重要的对象，比如网站的导航栏：
<div id="header">
<div id="title">这里是网站的标题</div>
<div id="nav">这里是网站导航栏</div>
</div>
导航栏一般是由多个小块内容组成，选择无序列表
<ul><li></li></ul>
