Feedify一款实用的头部固定跟随滚动jQuery插件

amohan

于 2021-12-19 10:04:00 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

分类专栏：网站模版文章标签： jquery bootstrap javascript

原文链接：https://yy123.ink/frontDetail/12014

网站模版专栏收录该内容

3170 篇文章

订阅专栏

Feedify是一款仿Instagram头部固定跟随滚动特效的jQuery插件。此插件允许在页面滚动时将指定内容头部固定于顶部，并随滚动而切换。使用前需引入jQuery及feedify.min.js文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址

Feedify是一款非常实用的仿Instagram头部固定跟随滚动特效jQuery插件。该jQuery插件可以在页面滚动的时候，将某段内容的头部固定在顶部，跟随页面滚动，然后到达新的段落时，该头部内容被弹回去，新的头部内容又固定在页面顶部。要使用该插件需要在页面中引入jQuery和feedify.min.js文件。在HTML结构中需要使用正确的class类，不论你的CSS样式如何编写，HTML结构和class类不能改变。

This is the header of my item. It will remain stuck to top while scrolling.

This is the body of my item. I can put whatever I want in here.

另外Feedify插件要滚动才有效果，所以确保你在页面中放入足够多的项。你可以使用或者不使用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的主题使用的是Bootstrap。如果使用它，你要在页面中引入Bootstrap3.3.4+版本的Bootstrap文件。

演示页面使用的是Thinlines图标。

dd: