Navbar direction bootstrap 4 - css

Question

Is there a default bootstrap way to make the navigation bar expand upwards instead of downwards?
My navbar has sticky-top but when you start the page the navbar is at the bottom of the page. While scrolling down the navbar eventually sticks to the top.
When the navbar is at the bottom of the page the menu should expand upwards instead of down.
Is there or something else in bootstrap to get the menu expand direcion to go up? If so I can just remove the class thats handeling this with javascript when the page is scrolled further then 100vh of the document.
I know about the .dropup but this only works with default dropdowns and now with navbars.
I know how to fix this with css but I was wondering if bootstrap 4 has a build in option for this.
.canvas{
height: 800px;
padding-top: 140px;
}
<div class="canvas">
<nav class="navbar navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-inverse" id="navbarSupportedContent">
<ul class="navbar-nav container">
<li data-menuanchor="Link1">Link1</li>
<li data-menuanchor="Link2">Link2</li>
<li data-menuanchor="Link3">Link3</li>
</ul>
</div>
</nav>
</div>
<!-- Ignore underneath -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 1

Do you want like this?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="pos-f-t bg-dark">
<div class="collapse" id="navbarToggleExternalContent">
<ul class="navbar-nav container">
<li data-menuanchor="Link1">Link1</li>
<li data-menuanchor="Link2">Link2</li>
<li data-menuanchor="Link3">Link3</li>
</ul>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
For more info visit this link