Sticky/fixed navbar jumping when scrolled down

Question

I think I found the actual reason and how to fix it, but am not proficient enough at coding to adapt the fix to my current code implementation. Here is the link to the post with the fix.

My code is as follows:

<script>
     var  mn = $("#MenuScroll");
          mns = "main-nav-scrolled";
          hdr = $('header').height();

     $(window).scroll(function() {
        if( $(this).scrollBtr() > hdr && $(window).width() > 780) {
          mn.addClass(mns);
        } else {
          mn.removeClass(mns);
        }
      });
</script>

#MenuScroll {
    -webkit-transition: all 0s ease;
    -moz-transition: all 0s ease;
    -ms-transition: all 0s ease;
    -o-transition: all 0s ease;
    transition: all 0s ease;
}
.main-nav-scrolled {
    z-index: 1000;
    position: fixed;
    width: 100%;
    top: 0;
    padding: 0;
   bottom: inherit;
}

<nav class="nav-bar" role="navigation" id="MenuScroll">
  <div class="wrapper">
    {% include 'site-nav' %}
  </div>
</nav>

Does anyone have suggestions? Thanks

Sticky/fixed navbar jumping when scrolled down

0 Answers0