title: run code on specific Scrollify section
body: <p>I have 3 <a href="https://projects.lukehaas.me/scrollify/" rel="nofollow noreferrer">Scrollify</a> sections. I'm trying to play a video when you scroll to section 2 and pause it when you scroll to section 1 or 3.</p>
  
  <p><a href="http://codepen.io/katiemoons/pen/XMNzyx/" rel="nofollow noreferrer">Codepen Demo</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>data-div-name="first"
  
  data-div-name="second"
  
  data-div-name="third"
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>before: function(first) {
      $("#video").get(0).pause();
  },
  
  before: function(second) {
      $("#video").get(0).play();
  },
  
  before: function(third) {
      $("#video").get(0).pause();
  },
  </code></pre>
  
  <p>It looks like my <strong>before functions</strong> are overriding perhaps because I'm not <strong>indexing</strong> the sections properly. Any help would be greatly appreciated.</p>
  
  <p>Thank you,</p>