我们将创建一个维持在可视化页面头部的标题，让它在用户向下滚动页面时不会干预正文的内容。
这是一个已经做好的示例，大家可以看看：
1.HTML代码
在HTML中，这个例子是非常简单的，我们只需要的是一个H1和header标签。下面再加一张图片来测试页面滚动的效果。
<header><h1>Sticky Header</h1></header><img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
2.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，导航仍然可以工作，但是顶部只会使用非粘性的默认状态样式。
3.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
position 属性指定了元素的定位类型。它有五个属性，分别是static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
relative：相对定位元素的定位是相对其正常位置。
fixed：元素的位置相对于浏览器窗口是固定位置。注：即使窗口是滚动的也不会移动
absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。注：定位使元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠。
sticky：基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
