Feedify is a JQuery plugin inspired by Instagram's "stick to top then drop" effect.
While scrolling your feed, the header remains stuck to top, then is pushed away by the new item.
It comes with a beautiful yet optional theme which is everything you need
to build a good-looking, functional feed of whatever you want.
The web is responsive now, there's no turning back. Feedify goes with the flow.
Feedify works on all the most recent browsers, and degrades gracefully down to IE9.
You don't need to be a front-end genius to make pretty things. Feedify comes with an optional theme.
Whatever your coding style is, Feedify respects it. Just add the right classes on your markup to make it work.
Feedify.js is less than 1 KB. Because there's no reason why awesome should always be bulky.
Setting up Feedify only takes a few minutes.
Five if you're really slow.
Feedify works with JQuery, so you'll need to add JQuery then Feedify for it to work properly. Be careful if you use multiple JavaScript libraries: Feedify is made to avoid conflicts, but you never know what might happen.
<script src="js/jquery-1.11.3.min.js"></script> <script src="js/feedify.min.js"></script>
As front-end developers, we like to remain totally free with our code. Some of us will rather keep things awfully simple, while others need extra markup. Some are totally sold with HTML5, while others are hardcorde div
users.
Whatever your style is, Feedify got you covered by using classes on key elements. Just make sure they're all here and you'll be good to go.
Note: Feedify is based on scrolling, so make sure you create enough items so there's something to scroll.
<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>
You're free to use the Feedify theme or not, but it still needs a few lines of CSS to work properly. Either include feedify.min.css
in your page, or copy-paste the code in your own CSS stylesheet.
.feedify .feedify-item { position: relative; } .feedify .feedify-item .feedify-item-header { z-index: 100; transform: translate3d(0, 0, 0); } .feedify .feedify-item.fixed .feedify-item-header { position: fixed; top: 0; } .feedify .feedify-item.bottom .feedify-item-header { position: absolute; bottom: 0; }
Everything is set up, now you just need to pull the trigger. To fire Feedify, just add the following piece of code within a <script>
tag in your page (or directly in your script page if you have one) and voilà!
$(function() {
$('.feedify').feedify();
});
Feedify comes with a few options to help you adapt it to your design.
0
$('.feedify').feedify({ offset: 100 });
Feedify theme comes in two version: one is based on Bootstrap, the other uses Outline, my lightweight boilerplate.
If your app already uses Bootstrap, or if you want to integrate Feedify in an existing structure that needs a complete and robust framework solution, I recommend that you go with Feedify for Bootstrap theme. Simply make sure that you include at least version 3.x.
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/feedify.min.css" rel="stylesheet"> <link href="css/feedify-theme.min.css" rel="stylesheet">
On the other hand, if you're concerned about file size, performance, or if you'll be using Feedify as a standalone component, I strongly suggest you give Outline a try.
The whole Feedify for Outline theme weights less than 7 KB (JQuery not included), that's about 20x lighter than Feedify for Bootstrap.
<link href="css/outline.min.css" rel="stylesheet"> <link href="css/feedify.min.css" rel="stylesheet"> <link href="css/feedify-theme-outline.min.css" rel="stylesheet">