Navbar sliding title issue

[njvan]

I have the following code, however the navbar is always showing at the top of the page and scrolls off. What should be changed to have it slide in over the large title on scroll and stick to the top?

<template>
<div>
<f7-navbar navbar-large>
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="title sliding">{{navname}}</div>
    <div class="title-large">
      <div class="title-large-text">{{navname}}</div>
    </div>
  </div>
</f7-navbar>
</div>