HTML代码
在HTML中，这个例子是非常简单的，我们只需要的是一个H1和header标签。下面再加一张图片来测试页面滚动的效果。

Sticky Header

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;

结论
用CSS3去创建这个动态头部和用jQuery去切换类是非常简单的，这些在你的网站设计中都能增加良好的用户体验。
更重要的是，代码优雅降级，使网站的设计实现的更加完美。