create sticky snap element (like iOS address book's initial letter tab).

jquery.sticksnap.coffee

# Ex.
#  -- HTML --
#  <article>
#    <header>snap me</header>
#    <p>Lorem ipsum...</p>
#  </article>
#  <article>
#    <header>snap me</header>
#    <p>Lorem ipsum...</p>
#  </article>
#
#  -- JS --
#  $('article').sticksnap('header');
#  or
#  $('article').sticksnap({selector: 'header', offset: 0});
(
  ($) ->
    cells = []
    offset = 0
    ($ window).on 'scroll', (event) ->
      scroll = ($ @).scrollTop()
      for cell, i in cells
        if cell.top < scroll + offset
          cell.el.css
            position: 'fixed'
            width: "#{cell.width}px"
            height: "#{cell.height}px"
            top: "#{offset}px"
            left: 'auto'
            right: 'auto'
            bottom: 'auto'
          if cells[i-1]? and scroll + cell.height > cell.top
            cells[i-1].el.css
              top: "#{(cell.top - scroll) - cells[i-1].height}px"
        else
          cell.el.css
            position: 'absolute'
            top: 'auto'
            bottom: '0'
            height: "#{cell.height}px"
          if cells[i-1]? and scroll + offset + cell.height > cell.top
            cells[i-1].el.css
              top: "#{(cell.top - scroll) - cells[i-1].height}px"

    $.fn.sticksnap = (options) ->
      return no unless options?
      if typeof options is 'string'
        selector = options
      else if typeof options is 'object'
        selector = options.selector
        offset or= options.offset
      console.log selector, offset
      for el in @
        el = $ el
        cell = el.find selector
        continue if cell.size() is 0
        cells.push
          el: cell
          top: cell.position().top
          height: cell.height()
          width: cell.width()
        cell.after append = ($ '<div>').css
          position: 'relative'
          width: cell.outerWidth(yes)
          height: cell.outerHeight(yes)
        cell.remove()
        append.append cell.css position: 'absolute'
        cell.css
          position: 'absolute'
          top: 0
          left: 0
          right: 0
      return this
) jQuery

jquery.sticksnap.min.js

(function(){(function(e){var t,n;t=[];n=0;e(window).on("scroll",function(r){var i,s,o,u,a,f;o=e(this).scrollTop();f=[];for(s=u=0,a=t.length;u<a;s=++u){i=t[s];if(i.top<o+n){i.el.css({position:"fixed",width:""+i.width+"px",height:""+i.height+"px",top:""+n+"px",left:"auto",right:"auto",bottom:"auto"});t[s-1]!=null&&o+i.height>i.top?f.push(t[s-1].el.css({top:""+(i.top-o-t[s-1].height)+"px"})):f.push(void 0)}else{i.el.css({position:"absolute",top:"auto",bottom:"0",height:""+i.height+"px"});if(t[s-1]!=null&&o+n+i.height>i.top){t[s-1].el.css({top:""+(i.top-o-t[s-1].height)+"px"});continue}f.push(void 0)}}return f});return e.fn.sticksnap=function(r){var i,s,o,u,a,f,l;if(r==null)return!1;if(typeof r=="string")u=r;else if(typeof r=="object"){u=r.selector;n||(n=r.offset)}console.log(u,n);l=[];for(a=0,f=this.length;a<f;a++){o=this[a];o=e(o);s=o.find(u);if(s.size()===0)continue;t.push({el:s,top:s.position().top,height:s.height(),width:s.width()});s.after(i=e("<div>").css({position:"relative",width:s.outerWidth(!0),height:s.outerHeight(!0)}));s.remove();i.append(s.css({position:"absolute"}));l.push(s.css({position:"absolute",top:0,left:0,right:0}))}return l}})(jQuery)}).call(this);