Problem with NavBar "jump" when doing Scroll (shrink)

• Change the position: sticky to position: fixed and add a width: 100% to your navbar in your CSS file:

  .navbar {
      position: fixed;
      width: 100%
  }
  

• Remove the class sticky-top from your navbar.

• Since position: fixed , unlike sticky, takes the element out of the flow of the document, you have to give a vertical margin to the content. "Wrap" your content in a div with a class, say, .content , and add

  .content {
      margin-top: 220px
  }
  

  to your CSS file.

And ... that's it. Since now the navbar is outside the document flow, its animation does not change the value of scrollTop of the window, which it does when it is with the value of sticky in the position. When there is no change in value, the animation itself does not trigger the scroll event, and the "bounce" does not occur.

Try it with this function debounce . Something like this:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
    $(window).scroll(debounce(function() {    
        var scroll = $(window).scrollTop();

         //>=, not <=
        if (scroll >= 50) {
            //clearHeader, not clearheader - caps H
             $(".navbar-brand").addClass("navbar-shrink");
             $(".navbar").addClass("nav-shrink");
            $(".logo-navbar").addClass("img-shrink");
        }
      else{
        $(".logo-navbar").removeClass("img-shrink");
         $(".navbar").removeClass("nav-shrink");
         $(".navbar-brand").removeClass("navbar-shrink");

      }
    }, 25));