title: How to Stick elements on page scroll
body: <p>I have a one page, scrolling site with 5 main sections that have title bars that span across the top of each respective section. I want each title bar to stick at the top (well, relative top-underneath the top sticky header) as you scroll down the section. I can get one to stick, but I am having trouble making it so that one sticks and then it goes away once the next section's title bar gets to the sticky point. </p>
  
  <p>I can't figure out another way to bind the HTML or CSS with the jQuery if else statement to make this work. I was thinking I could try to make it work within each sections' id but I don't think there's like a "<code>withinId</code>" jQuery selector. </p>
  
  <p>I'm posting the latest jQuery I attempted (<em>with just 2 out of the 5 variables I will need to make work here</em>). I know it's wrong but I'm seriously stuck. Any ideas here? Thanks a million.</p>
  
  <p>(abbreviated) HTML:</p>
  
  <pre><code>&lt;div id="welcome"&gt;
   &lt;div class="title-bar"&gt;
    &lt;p&gt;WELCOME&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="global"&gt;
   &lt;div class="title-bar"&gt;
    &lt;p&gt;GLOBAL ENGAGEMENT&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="community"&gt;
   &lt;div class="title-bar"&gt;
    &lt;p&gt;COMMUNITY&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="resources"&gt;
   &lt;div class="title-bar"&gt;
    &lt;p&gt;RESOURCES&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="horizon"&gt;
   &lt;div class="title-bar"&gt;
    &lt;p&gt;ON THE HORIZON&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.title-bar {
      padding: 5px;
      position: relative; 
  }
  
  .title-bar.sticky {
       position: fixed;
       top: 111px;
       width: 100%;
       z-index: 1040;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  
      var welcomeTitle = $('#welcome .title-bar');
      var globalTitle = $('#global .title-bar');
      var communityTitle = $('#community .title-bar');
      var resourcesTitle = $('#resources .title-bar');
      var horizonTitle = $('#horizon .title-bar');
  
      var stickyOffset = $('#header').offset().top;
  
      if ($w.scrollTop() &gt; stickyOffset + 225) {
          welcomeTitle.addClass('sticky');
          globalTitle.addClass('sticky');
      } else {
          welcomeTitle.removeClass('sticky');
          globalTitle.addClass('sticky');
      }
  
      if (welcomeTitle.hasClass('sticky') &amp;&amp; globalTitle.hasClass('sticky')) {
          welcomeTitle.removeClass('sticky');
      } else {
          //
      }
  });
  </code></pre>