title: Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery
body: <p>The Instagram app has a nice sticky header that pushes the current one up in place of the new one. I found a great tutorial on how to do this natively for Android, but I'm looking to do it with JavaScript and CSS. </p>
  
  <p>I was able to get my header to switch out for a new one, but I can't seem to find a way to mimic the way Instagram does it. Any help is greatly appreciated. </p>
  
  <p>*<strong><em>Edit:</strong> I was able to get the header to stick to the top of the page when scrolling using waypoints as Cj in the comments pointed out. (<a href="http://imakewebthings.com/jquery-waypoints/sticky-elements/">link to waypoints</a>).
  The main issue I'm having is getting the "push up" effect that instagram uses in their mobile app for iPhone. I would link to an example but I've never seen it used before.</em>* </p>
  
  <p>*<strong>*Edit 2:</strong> Using parts of the codepen that @Chris provided I was able to get the headers to stick. I then added a .slideUp effect. My issue now is getting the .slideUp effect to only happen when the next header is reached. Right now the effect activates on scroll.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>(function() {
  function stickyTitles(stickies) {
      this.load = function() {
          stickies.each(function(){
              var thisSticky = jQuery(this);
              jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
          });
      }
      this.scroll = function() {      
          stickies.each(function(){           
              var thisSticky = jQuery(this),          
                  pos = jQuery.data(thisSticky[0], 'pos');
              if (pos &lt;= jQuery(window).scrollTop()) {
                  thisSticky.addClass("fixed");
                  // added this 
                   $(".followMeBar:parent").slideUp();
  
              } else {
                  thisSticky.removeClass("fixed");
              }
          });         
      }
  }
  jQuery(document).ready(function(){
      var newStickies = new stickyTitles(jQuery(".followMeBar"));
      newStickies.load();
      jQuery(window).on("scroll", function() {
          newStickies.scroll();
  
      }); 
  });
  </code></pre>
  
  <p>})();</p>