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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!