Feedify一款实用的头部固定跟随滚动jQuery插件

Feedify是一款非常实用的仿Instagram头部固定跟随滚动特效jQuery插件。该jQuery插件可以在页面滚动的时候，将某段内容的头部固定在顶部，跟随页面滚动，然后到达新的段落时，该头部内容被弹回去，新的头部内容又固定在页面顶部。

要使用该插件需要在页面中引入jQuery和feedify.min.js文件。
<script src="js/jquery.min.js"></script>
<script src="js/feedify.min.js"></script>       
在HTML结构中需要使用正确的class类，不论你的CSS样式如何编写，HTML结构和class类不能改变。
<div class="feedify">
  <div class="feedify-item">
   <div class="feedify-item-header">
    This is the header of my item.
    It will remain stuck to top while scrolling.
   </div>
   <div class="feedify-item-body">
    This is the body of my item.
    I can put whatever I want in here.
   </div>
  </div>
</div>   
另外Feedify插件要滚动才有效果，所以确保你在页面中放入足够多的项。
你可以使用或者不使用Feedify的主题，但是下面的一些CSS样式是必须的。下面的CSS样式都包含在feedify.min.css文件中。
.feedify .feedify-item {
  position: relative;
}
.feedify .feedify-item .feedify-item-header {
  z-index: 100;
}
.feedify .feedify-item.fixed .feedify-item-header {
  position: fixed;
  top: 0;
}
.feedify .feedify-item.bottom .feedify-item-header {
  position: absolute;
  bottom: 0;
}     
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化Feedify插件。
$(function() {
  $('.feedify').feedify();
});   
Feedify的主题使用的是Bootstrap。如果使用它，你要在页面中引入Bootstrap3.3.4+版本的Bootstrap文件。
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="css/feedify.min.css" rel="stylesheet">
<link href="css/feedify-theme.min.css" rel="stylesheet">   
演示页面使用的是Thinlines图标。