title: Lag when using Midnight.js on a full-height element
body: <p>I have a fixed position element which I am using Midnight.js (<a href="https://aerolab.github.io/midnight.js/" rel="nofollow noreferrer">https://aerolab.github.io/midnight.js/</a>) to change the colour of depending on the elements which scroll behind it.</p>
  <p>The idea is that the contrast is always high enough for the navigational elements to be visible/useable.</p>
  <p>I'm seeing a strange lag behind the element which triggers the change between states on scroll, which gets smaller the further the page is scrolled (or, the closer to bottom of the viewport the dividing line is). it's best communicated by these images – the element in question is the navigational bar on the left:</p>
  <p><a href="https://i.stack.imgur.com/qXln2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qXln2.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/iyfMV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iyfMV.jpg" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/zsekn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zsekn.jpg" alt="enter image description here" /></a></p>
  <p>I just can't figure out why this is happening. Is something in my CSS clashing with Midnight's functions?</p>
  <p>Full version demonstrating issue: <a href="https://hba.matmartin.studio/about/" rel="nofollow noreferrer">https://hba.matmartin.studio/about/</a></p>
  <p>HTML (with non-pertinent elements removed):</p>
  <pre><code>&lt;div class=&quot;pagewrap&quot;&gt;
      &lt;div class=&quot;triggers&quot;&gt;
          &lt;div class=&quot;nav-trigger-wrap&quot;&gt;
              &lt;div class=&quot;nav-trigger&quot;&gt;
                  &lt;div class=&quot;nav-trigger-line&quot; id=&quot;tl-top&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;nav-trigger-line&quot; id=&quot;tl-bot&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;search-trigger&quot;&gt;
              &lt;div class=&quot;st-close&quot;&gt;
                  &lt;!-- svg code --&gt;
                  &lt;div class=&quot;search-trigger-line&quot; id=&quot;tl-top&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;search-trigger-line&quot; id=&quot;tl-bot&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;sep-line-v&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;twitter-trigger&quot;&gt;
              &lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;
                  &lt;!-- svg code --&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;pagecontent&quot;&gt;
          &lt;div class=&quot;width&quot; id=&quot;page-lander&quot;&gt;
              &lt;!-- content --&gt;
          &lt;/div&gt;
          &lt;div class=&quot;fullwidth&quot; data-midnight=&quot;white&quot;&gt;
              &lt;!-- more content --&gt;
          &lt;/div&gt;
          &lt;div class=&quot;fullwidth&quot;&gt;
              &lt;!-- even more content --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS (<code>height</code> and <code>position</code> etc is added inline by the jQuery plugin)</p>
  <pre><code>.pagewrap {
      width: 100%;
      z-index: 10;
      min-height: 100vh;
  }
  
  .triggers,
  .midnightHeader,
  .midnightInner {
      width: 24px;
      padding: 37px 0 0 32px;
      box-sizing: content-box;
      z-index: 10002;
  }
  
  .triggers .nav-trigger-wrap {
      height: 12px;
  }
  
  .triggers .search-trigger {
      width: 22px;
      height: auto;
      min-height: 22px;
      padding: 16px 0 32px 0;
      margin: 0 0 0 1px;
  }
  
  .triggers .sep-line-v {
      width: 1px;
      height: 77vh;
      margin: 0 10.5px;
      background-color: #F4F4F4;
  }
  
  .triggers .twitter-trigger {
      width: 22px;
      height: auto;
      padding: 28px 0 0 0;
      margin: 0 0 0 1px;
  }
  
  #page-lander {
      padding: 88px 0;
  }
  
  .width {
      width: 78%;
      margin: 0 auto 64px;
  }
  
  .fullwidth {
      width: 100%;
      padding: 72px calc(14% + 24px);
      background-color: #F4F4F4;
      color: #383838;
  }
  
  .midnightHeader.white .sep-line-v,
  .midnightHeader.white .nav-trigger-line {
      background-color: #383838;
  }
  </code></pre>
  <p>JS:</p>
  <pre><code>$('div.triggers').midnight();
  </code></pre>