Html5添加實用的仿Instagram頭部固定跟隨滾動特效插件教程

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

2、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>

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

4、初始化插件
$(function() {
  $('.feedify').feedify();
});   

5、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移動廣告聯盟專一於移動應用廣告聯盟,經過打造用戶體驗最好、更方便對移動營銷廣告進行高效的優化管理,爲廣告主提供精準的高質量的無線營銷和應用推廣服務。