title: Content blinking on scroll
body: <p>I'm building a Angular 4 app with Materialize css framework and jquery, for now.</p>
  
  <p>The problem i'm facing with is random blinking while scrolling. I made a script that will set div position to the top of the window when it gets to the top of the window. </p>
  
  <p>I can provide a gif with a problem:
  <a href="https://i.stack.imgur.com/if8Gw.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/if8Gw.gif" alt="enter image description here"></a></p>
  
  <p>If you look at the small bar with "Can you stop blinking please" text, you will know what am I talking about.</p>
  
  <p>HTML part:</p>
  
  <pre><code>&lt;div id="list-header"&gt;
  &lt;div class="wrapper"&gt;
      &lt;div class="row-head row"&gt;
          &lt;div class="col s3"&gt;&lt;h5&gt;Can&lt;/h5&gt;&lt;/div&gt;
          &lt;div class="col s3"&gt;&lt;h5&gt;You&lt;/h5&gt;&lt;/div&gt;
          &lt;div class="col s3"&gt;&lt;h5&gt;Stop blinking&lt;/h5&gt;&lt;/div&gt;
          &lt;div class="col s3"&gt;&lt;h5&gt;Please&lt;/h5&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS part:</p>
  
  <pre><code>#list-header {
      border-top: 1px solid #D6E2EB;
      border-bottom: 1px solid #D6E2EB;
      background: #ECF1F4;
      position: absolute;
      width:100%;
      z-index:100;
  }
  
  #list-header.floating {
      position: fixed;
      top: 0;
  }
  </code></pre>
  
  <p>JS part inside Angular 4 component:</p>
  
  <pre><code>ngOnInit() {
      $(window).scroll(function () {
          if ($(window).scrollTop() &gt; $('#list-header').offset().top) {
              $('#list-header').addClass('floating');
          }
          else {
              $('#list-header').removeClass('floating');
          }
      });
  }
  </code></pre>
  
  <p>Thank you for your time!</p>