Scroll After Fixed Navigation

jQuery :

$(document).ready(function() {

  var toggleAffix = function(affixElement, scrollElement, wrapper) {

    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;
 
    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }
   
  };

  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');
 
    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, $(this), wrapper);
    });
 
    // init
    toggleAffix(ele, $(window), wrapper);
  });

});

HTML
<nav class="navbar navbar-expand-sm navbar-light" data-toggle="affix">

CSS

.affix {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/* fixed to top styles */
.affix.navbar {
  background-color: #333;
}
.affix.navbar .nav-item>a,
.affix.navbar .navbar-brand {
    color: #fff;

}

https://www.codeply.com/go/LDHQhWUG0x