title: Is there a simple jQuery function to pin and unpin an h1 tag?
body: <p>I'm aware of <a href="http://johnpolacek.github.com/scrollorama/" rel="nofollow noreferrer">scrollerama</a> and <a href="http://johnpolacek.github.com/superscrollorama/" rel="nofollow noreferrer">superscrollerama</a>. </p>
  
  <p>I've struggled with them both for a couple days. And I can't get them to function for just the pinning. I don't need the animations and type support. I try using the sample doc and stripping out HTML content one block element at a time and the page breaks. Seems scrollerama only works when the entire example is present. Or more likely.... I'm not smart enough to figure it out.</p>
  
  <p>All I want to do is pin an <code>&lt;h1&gt;&lt;/h1&gt;</code> tag and then unpin it when a specific tag is reached.</p>
  
  <p>I've also seen this question here: <a href="https://stackoverflow.com/questions/10274020/css-trouble-with-pinned-header-div">CSS Trouble with Pinned Header Div</a> but that doesn't seem to function at all.</p>
  
  <p>Example code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Untitled&lt;/title&gt;
      &lt;style type="text/css"&gt;
      &lt;/style&gt;
      &lt;script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;article&gt;
      &lt;header&gt;&lt;/header&gt;
      &lt;section id="wrap"&gt;
  
          &lt;h1&gt; Pin this when it hits the window top&lt;/h1&gt;
          &lt;div class="innercontent"&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p class="unpin"&gt;Unpin the previous h1 tag when this hits window top&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;h1&gt; Pin this when it hits the window top&lt;/h1&gt;
          &lt;div class="innercontent"&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p class="unpin"&gt;Unpin the previous h1 tag when this hits window top&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;h1&gt;Pin this when it hits the window top&lt;/h1&gt;
          &lt;div class="innercontent"&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p&gt;inner content here&lt;/p&gt;
          &lt;p class="unpin"&gt;Unpin the previous h1 tag when this hits window top&lt;/p&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/article&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>A link to some jquery function example somewhere would be exceptionally helpful. Or a quick explanation of how to strip scrollerama down to only the pin/upin function would help.</p>
  
  <h2>Additional:</h2>
  
  <p>sbeliv01 suggested this question: <a href="https://stackoverflow.com/questions/10760567/how-to-find-the-closest-element-to-the-current-position-with-jquery">How to find the closest element to the current position with jQuery</a></p>
  
  <p>However that method fails when margins have been adjusted (reset for HTML5). It only works if there's absolutely no margin adjustment on an element. And when attempting to simply wrap H1 tags in an unstyled div, there's a terrible flicker upon page scrolling.</p>
  
  <p>This is non-functional, but I've set up a <br />
  jsFiddle to play with as needed: <br />
  <a href="http://jsfiddle.net/NotInUse/ffdFd/2/" rel="nofollow noreferrer"><strong>FIDDLE HERE</strong></a><br />
  As you can see things pin just fine, but then they fail to unpin.</p>