title: Multiple sticky elements
body: <p>How to <strong>write</strong> the code (below) that <strong>unlimited</strong> (#stickyContainer) number of elements also to work the code? Now, one element working.</p>
  
  <p><a href="https://jsfiddle.net/kzsolt/3xmhkr8L/" rel="nofollow">https://jsfiddle.net</a></p>
  
  <pre><code>function $(id) {
      return document.getElementById(id);
  }
  
  function sticky() {
      var stickyBoxHeight = $('stickyBox').offsetHeight;
  
      var stickyTop = $('stickyBox').getBoundingClientRect();
      var stickyBoxTop = stickyTop.top;
  
      var stickyBoxBottom = stickyBoxTop + stickyBoxHeight;
  
      var stickyHeight = $('sticky').offsetHeight;
  
      if (stickyBoxTop &lt;= 0) {
          $('sticky').className = 'fixed';
      } else if (stickyBoxBottom &gt;= stickyBoxHeight) {
          $('sticky').className = '';
      }
  
      if (stickyBoxBottom &lt;= stickyHeight) {
          $('sticky').className = 'fixedBottom';
      }
  }
  
  window.onscroll = function () {
      sticky();
  }
  </code></pre>