Html5添加实用的仿Instagram头部固定跟随滚动特效插件教程

一、使用方法
<script src="js/jquery.min.js"></script>
<script src="js/feedify.min.js"></script>

二、Html结构
<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>

三、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;
}

四、初始化插件
$(function() {
  $(’.feedify’).feedify();
});

五、Feedify主题
<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图标。    
 
KeyMob移动广告联盟专注于移动应用广告联盟,通过打造用户体验最好、更方便对移动营销广告进行高效的优化管理,为广告主提供精准的高质量的无线营销和应用推广服务。