Я пытаюсь воспроизвести панель навигации, похожую на этот веб-сайт. поэтому есть нелипкая панель навигации, когда пользователь открывает веб-сайт, и после того, как пользователь немного прокрутил вниз, нелипкая панель навигации исчезла и заменилась липкой панелью навигации. как я могу добиться чего-то подобного с помощью materialize css? до сих пор я сделал только нелипкую часть навигационной панели
<nav class="nav-extended">
<div class="nav-wrapper">
<a href="#" class="brand-logo"><img src="viva.png" alt="" id="logo"></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons"></i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
<li><a href="#">Register</a></li>
<li>|</li>
<li><a href="#">Login</a></li>
</ul>
</div>
<hr>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab"><a href="#">Test 1</a></li>
<li class="tab"><a href="#">Test 2</a></li>
<li class="tab"><a href="#">Test 3</a></li>
</ul>
</div>
</nav>