I'm working with bootstrap-vue and as you can see in jsfiddle, sticky property is working correctly when used in navbar.
The problem is when I move this navbar to a separate component and call it, sticky attribute fails to work correctly.
<b-navbar toggleable="lg" type="dark" variant="info" sticky>
<b-navbar-brand href="#">NavBar</b-navbar-brand>
</b-navbar>
fixed="top" is still working when using as a component.
<b-navbar toggleable="lg" type="dark" variant="info" fixed="top">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
</b-navbar>
CSS position: sticky
is not supported by all web browsers. Using the latest Chrome, your fiddle is working for me though.