title: How to replace a sticky element while scrolling?
body: <h3>Context</h3>
  <p>I am making a blog website and I would like to have one sticky element that would be updated which each new year and month as the user scrolls. So that the header would show the current month and year of the listed blog articles.</p>
  <p>When coding, I try to achieve an effect with HTML, then CSS if it doesn't work, then JS if it still doesn't. I believe this is good practice as it uses built in features and reduces the needed computing resources but let me know if you do not share this opinion.</p>
  <h3>Problem</h3>
  <p>Ideally, the style of the elements would be changed when 'stuck'. For this, I took a look at <a href="https://davidwalsh.name/detect-sticky" rel="nofollow noreferrer">David Walsh's solution</a> that uses <code>IntersectionObserver</code> but it glitches when adding more than one element.</p>
  <p>The main issue I face is that when having several entries, the script detects an element as 'pinned' when it is at the bottom border of the window.</p>
  <h3>Code</h3>
  <p>Here is a snippet. I also have made a <a href="https://jsfiddle.net/s6mozbLc/2/" rel="nofollow noreferrer">jsfiddle with the same code</a>.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Essentially putting David Walsh's code in a loop
  
  document.querySelectorAll(".myElement").forEach((i) =&gt; {
  const observer = new IntersectionObserver(([i]) =&gt; i.target.classList.toggle("is-pinned", i.intersectionRatio &lt; 1),
  {threshold: [1]});
  observer.observe(i);
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#parent { 
    height: 2000px; 
  }
  
  .myElement {
    position: sticky;
    top: -1px;
  }
  
  /* styles for when the header is in sticky mode. The transition times accentuate the undesired effect */
  .myElement.is-pinned {
    color: red;
    transition: color 0.3s, background-color 0.3s;
    background-color: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;
    &lt;!-- Adding more than one 'hello' element. The br's are here to add vertical space and be longer than the viewport height --&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="myElement"&gt;Hello!&lt;/div&gt;
    
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="myElement"&gt;Hello 2!&lt;/div&gt;
    
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="myElement"&gt;Hello 3!&lt;/div&gt;
    
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="myElement"&gt;Hello 4!&lt;/div&gt;
    
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="myElement"&gt;Hello 5!&lt;/div&gt;
    
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="myElement"&gt;Hello 6!&lt;/div&gt;
    
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="myElement"&gt;Hello 7!&lt;/div&gt;
    
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="myElement"&gt;Hello 8!&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>