在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
结论
用CSS3去创建这个动态头部和用jQuery去切换类是非常简单的，这些在你的网站设计中都能增加良好的用户体验。
更重要的是，代码优雅降级，使网站的设计实现的更加完美。
可以把图片作为文字那个块标签的背景图片或者你把图片和文字都放在一个同一个div 里面然后给图片和文字加上定位，然后文字的图层比图片的图层位置高就行了第一种
<style>
.div{width: 200pxheight: 200pxbackground: url("图片路径") no-repeat}
</style>
<div class="div">
<p>你的文字内容</p>
</div>
第二种
<style>
.div{width: 200pxheight: 200pxposition: relativez-index: 0}
.div img{position: absolutetop: 0left: 0width: 100pxheight: 100px}
.div p{position: absolutetop: 0left: 0z-index: 10}
</style>
<div class="div">
<img src="图片路径" alt="#">
<p>你的文字内容</p>
</div>
