title: make a div element stick to the top of the screen
body: <p>I have wrote a script to detect when I reach the div element which is a navigation bar and then I change it's css to position fixed and top 0 so it will be fixed to the top, the problem that it doesn't do that, it acts like scroll to top and it jumps to the beginning of the screen. (it's flickers)</p>
  
  <p>Javascript</p>
  
  <pre><code>        var currentScrollTop = 0;
          var barMenuOriginalTopPos = $('#navigation').offset().top;
          console.log('original:' + barMenuOriginalTopPos);
          $(window).scroll(function() {
  
              currentScrollTop = $(window).scrollTop();
              console.log(currentScrollTop);
              if(currentScrollTop &gt;= barMenuOriginalTopPos &amp;&amp; $('#navigation').hasClass('fixElementToTop') == false){
                  $('#navigation').addClass('fixElementToTop');
              }
              else if(currentScrollTop &lt; barMenuOriginalTopPos &amp;&amp; $('#navigation').hasClass('fixElementToTop') ){
                  $('#navigation').removeClass('fixElementToTop');
              }
          });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fixElementToTop { position: fixed; top:0; z-index:100;}
  </code></pre>
  
  <p>Why </p>