Vertical Nav bar separates from header when I scroll

Question

I'm creating a vertical nav bar that I want fixed on the left hand side and for the container to take up the entire height of the window. It's fine and dandy until I scroll down. The pictures below will explain everything.

Looks fine here

Looks not fine here

HTML

<h1>Blazing Bevy</h1>

<nav>
    <ul>
        <li>
            <NavLink href="/">Play</NavLink>
        </li>
        <li>
            <NavLink href="/About">About</NavLink>
        </li>
    </ul>
</nav>

CSS

nav {
    border-right: 10px solid #626262;
    height: 100vh;
    position: fixed;
    width: 6.5rem;
}

Answer 1

If you want to scroll with header and nav(sidenav) then you should fixed header too and if you want scroll with only sidenav then you should go with sticky like this

 nav {
border-right: 10px solid #626262;
height: 100vh;
position: sticky;
width: 6.5rem;
}