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移动广告联盟专注于移动应用广告联盟,通过打造用户体验最好、更方便对移动营销广告进行高效的优化管理,为广告主提供精准的高质量的无线营销和应用推广服务。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值