title: With JavaScript pinned Element on Website jumps and has an enourmous delay when scrolling
body: <p>I'm building a custom wordpress menu navigation bar thats located after a Slider that fills the whole viewport. Said bar is supposed to stick to the top when you scroll past it.<br> 
  The Theme being used is "Holmes - Digital Agency" from Mikado + revolution slider. <br>
  The Site in question is <a href="https://www.level-7.de" rel="nofollow noreferrer">https://www.level-7.de</a> if you wanna have a look for yourself, right now the scrollmagic-version is active since it's working the best out of all three versions.</p>
  
  <p>Important to note here it works fine on Mozilla but not on Chrome or Safari. I tried to implement the pinning with jquery, jscript and scrollmagic. All of these worked atleast for the pinning part. With jquery and jscript there is a massive delay and jump of the element when you scroll. <br>
  With scrollmagic it works fine, except that it almost never works on the first scroll after reloading the page, after that it works perfectly fine. <br>Additionally i would want to do it in pure jscript since loading an entire lib for just one effect seems a bit overkill to me.<br>I tried everything i could find either on here or on scrollmagics github but nothing worked so far.<br> I want to make clear again that the pinning does work it's really only that weird delay or just straight up ignore that i don't get. Thanks in advance for any answers that might help me.</p>
  
  <p>Scrollmagic</p>
  
  <pre><code>var controller = new ScrollMagic.Controller({});
  
    var navpin = new ScrollMagic.Scene({
        duration: 0,
        triggerElement: '#start',
        triggerHook: 0   
    });
  
    controller.addScene(navpin);
    // navpin.addIndicators();
    navpin.setPin("#start");
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code> var main = function() {
      $(window).scroll(function() {
          var scrollVal = $(this).scrollTop();
  
          if ( scrollVal &gt;= $('#start').outerHeight(true)) {       
              $('.sticky').css({'position':'fixed','top' :'0px'});
          } else {
              $('.sticky').css({'position':'absolute','top':'auto'});
          }
      });
    }
  
    $(document).ready(main);
  </code></pre>
  
  <p>jscript</p>
  
  <pre><code>// Get the navbar
  var navbar = document.getElementById("start");
  
  // Get the body
  var bodymargin = document.body;
  
  // Get the offset position of the navbar
  var sticky = navbar.getBoundingClientRect().top;
  
  // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
  window.onscroll = function() {
    // console.log(window.pageYOffset);
    // console.log(sticky);
    if (window.pageYOffset &gt;= sticky) {
      navbar.classList.add("sticky");
      bodymargin.classList.add("bodymargin");
    } else {
      navbar.classList.remove("sticky");
      bodymargin.classList.remove("bodymargin");  
    }
  };
  </code></pre>
  
  <p>some CSS, note that not everything is used for every version</p>
  
  <pre><code>.sticky {
      position: fixed;
      top: 0;
    }
  
  .bodymargin{
      margin-top:100px;
    }
  
  #start{
      width: 100% !important;
      height: 100px;
      margin:auto;
      background-color: rgb(0, 91, 127);
    }
  </code></pre>
  
  <p>In the end it's supposed to look like this: <a href="https://www.w3schools.com/howto/howto_js_navbar_sticky.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_navbar_sticky.asp</a>, real smooth and no jumping.</p>