Bootstrap - affix navbar scroll in but vanishes on "leaving"

HTML-CSS
#1

OK, next challenge. I have cod that makes 2 navbars (1 top and 1 bottom) gently appear as you move away form the top of the page… when I get back to the top of the page they simply vanish (I want them to vanish but in a smooth way - opposite of how it comes in)… Anyway the code for the smooth appear is in CSS3 and looks like:

 #nav_bottom.affix {
      -webkit-animation: 1s menuUp ease;
              animation: 1s menuUp ease; /* linear */
      bottom: 0;
        width: 100%;
        z-index: 9998 !important;
        margin-bottom: 0;
    }

is there an equivalent for “un-affix”?

full page for your delectation is:

https://robwuk.github.io/Profile_B/

while I wait for an expert answer from you clever people I am off to look at scroll-spy to highlight sections in the menu

#2