仿Instagram头部固定跟随滚动特效jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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

响应式设计。
跨平台，跨浏览器，支持移动手机。
可选Bootstrap主题。
轻量级，易于使用。

使用方法

要使用该插件需要在页面中引入jQuery和feedify.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/feedify.min.js"></script>

HTML结构

要使用该头部固定特效插件，在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插件要滚动才有效果，所以确保你在页面中放入足够多的项。

CSS样式

你可以使用或者不使用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主题

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图标。

Feedify插件github地址：https://github.com/sarahdayan/feedify