jQuery Plugin For Instagram Style Sticky Headers - Feedify

Feedify is a jQuery plugin for displaying a responsive, Instagram-style feed with animated headers which stick on the top of the webpage as you scroll down.

How to use it:

1. Load the required feedify.min.css for basic stick header styles.

<link href="css/feedify.min.css" rel="stylesheet">

2. Load the feedify-theme.min.css for the feed layout.

<link href="css/feedify-theme.min.css" rel="stylesheet">

3. Build the html structure for the feed.

<div class="feedify">
<section class="feedify-item">
  <header class="feedify-item-header clearfix"> <img alt="" src="img/user-1.jpg" class="img-circle pull-left">
    <h1 class="pull-left"><a href="#">Marcus Lewis</a></h1>
    <h2 class="pull-right hidden-xs">20 minutes ago</h2>
  </header>
  <div class="feedify-item-body"> <img alt="" src="img/article-1.jpg" class="img-responsive"> </div>
  <footer>
    <div class="actions">
      <ul class="list-inline">
        <li><a href="#"><i class="icon-heart"></i></a></li>
        <li><a href="#"><i class="icon-speak"></i></a></li>
        <li class="pull-right"><a href="#"><i class="icon-tripledot"></i></a></li>
      </ul>
    </div>
    <div class="legend">
      <h3><a href="#"><i class="icon-heart"></i> 51 Likes</a></h3>
      <h4 class="pull-left"><a href="#">Marcus Lewis</a></h4>
      <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
    </div>
    <ul class="comments list-unstyled">
      <li>
        <h4 class="pull-left"><a href="#">Sawyer Flint</a></h4>
        <p>You think water moves fast? You should see ice. It moves like it has a mind.</p>
      </li>
      <li>
        <h4 class="pull-left"><a href="#">Chelsea McKay</a></h4>
        <p>Now that there is the Tec-9, a crappy spray gun from South Miami.</p>
      </li>
    </ul>
  </footer>
</section>
<section class="feedify-item">
  <header class="feedify-item-header clearfix"> <img alt="" src="img/user-2.jpg" class="img-circle pull-left">
    <h1 class="pull-left"><a href="#">Elisabeth McCurry</a></h1>
    <h2 class="pull-right hidden-xs">30 minutes ago</h2>
  </header>
  <div class="feedify-item-body"> <img alt="" src="img/article-2.jpg" class="img-responsive"> </div>
  <footer>
    <div class="actions">
      <ul class="list-inline">
        <li><a href="#"><i class="icon-heart"></i></a></li>
        <li><a href="#"><i class="icon-speak"></i></a></li>
        <li class="pull-right"><a href="#"><i class="icon-tripledot"></i></a></li>
      </ul>
    </div>
    <div class="legend">
      <h3><a href="#"><i class="icon-heart"></i> 51 Likes</a></h3>
      <h4 class="pull-left"><a href="#">Elisabeth McCurry</a></h4>
      <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
    </div>
    <ul class="comments list-unstyled">
      <li>
        <h4 class="pull-left"><a href="#">Sawyer Flint</a></h4>
        <p>You think water moves fast? You should see ice. It moves like it has a mind.</p>
      </li>
      <li>
        <h4 class="pull-left"><a href="#">Chelsea McKay</a></h4>
        <p>Now that there is the Tec-9, a crappy spray gun from South Miami.</p>
      </li>
    </ul>
  </footer>
</section>

4. Load the latest version of jQuery and the jQuery Feedify plugin at the bottom of the webpage.

<script src="jquery.min.js"></script> 
<script src="js/feedify.min.js"></script> 

5. Initialize the plugin.

$('.feedify').feedify();

6. Available settings.

$('.feedify').feedify({
  container: $(window),
  offset: 0
});

Change log:

2016-07-21

• JS update

2016-07-18

• Fix version number

2016-07-15

• Refactor Javascript, add Sass files and add offset option

2015-11-28

• Fix sticky header issue on iOS

---

This awesome jQuery plugin is developed by sarahdayan. For more Advanced Usages, please check the demo page or visit the official website.