three java scripts, one overwriting one

I have two “nav” bars. The top nav scrolls in slow from the top-like its been trigged by the hiding navscript. The bottom nav acts as it should, displays on page open and disappears when page scrolls up then reappears when page scrolls down. Most time the page loads correctly and displays the random image background with the nav bar at top but the top nav always slides in after page laod. I had to put a bookmark to make the page load and show the random image background, #top. Otherwise the page would load at the h1 marker and hide the random image background which is in a fixed position. After numerous nav clicking back and forth the page loads to the top of the container and hides the random image background. Every time the page loads I can briefly see the h1 where the nav bar should be, its bright orange so I see it flash.

 <h2 id="top"></h2>
 <nav id="navbar">
    <ul>
        <li><b><a href="indexWEATHER.html">Weather</a></b></li>
        <li><b><a href="indexRace.html">Race</a></b></li>
        <li><b><a href="index.html"><img src="img/Burgee_WSC.png" width="30" height="10"></a> 
 </b></li>
        <li><b><a href="indexTour.html">Tour</a></b></li>
        <li><b><a href="indexMembers.html#top" class='active-page'>Club</a></b></li>
    </ul>

 </nav>

<nav id="secondLineNav">
    <ul>
        <li><b><a href="*.html">Sign Up</a></b></li>
        <li><b><a href="*.html">Zoom</a></b></li>
        <li><b><a href="*.html">Current Windword</a></b></li>
        <li><b><a href="*.html">Archives</a></b></li>
        <li><b><a href="indexPhotos.html">Photos</a></b></li>
        <li><b><a href="*.html">Winwords</a></b></li>
    </ul>
  </nav>

   <div class="container">

<h1>Updates, calendar and site map</h1>
   </div>


  <script >
    var random_images_array = ["1.jpg", "2.jpg","3.jpg","4.jpg","5.jpg"];
    
    function getRandomImage(imgAr, path) {
        path = path || 'random/'; // default path here
        var num = Math.floor( Math.random() * imgAr.length );
        var img = imgAr[ num ];
        var imgStr = '<img src="' + path + img + '" alt = "Random Image of Club">';
        document.write(imgStr); document.close();
    }
    </script>

   <div class="background">
          
    <div class="randomimages">
        <!--<img src="" alt="">-->
            <script type="text/javascript">getRandomImage(random_images_array);</script>
    </div>
    </div><!--background-->
    </script>

    <script type="text/javascript">  
    var lastScrollTop = 0;
    navbar = document.getElementById("navbar");
    window.addEventListener("scroll", function(){
    var scrollTop = window.pageYOffest || document  
        .documentElement.scrollTop;
    if(scrollTop > lastScrollTop){
        navbar.style.top="-90px";
    } else {
        navbar.style.top="0";
    }
    lastScrollTop = scrollTop;
    })
    </script>

    <script type="text/javascript">  
    var lastScrollTopb = 81;
    secondLineNav = document.getElementById("secondLineNav");
    window.addEventListener("scroll", function(){
    var scrollTopb = window.pageYOffest || document  
        .documentElement.scrollTop;
    if(scrollTopb > lastScrollTopb){
      secondLineNav.style.top="-90px";
    } else {
      secondLineNav.style.top="81px";
    }
    lastScrollTopb = scrollTopb;
   })
   </script>

    nav{
      width: 100%;
      height: 80px;
      background-color: rgba(0, 0, 0, 0.5);
      line-height: 80px;
      z-index: 999;
      position: fixed;
      transition: .5s;    
      white-space:nowrap;

     }

    nav ul{
   text-align: center;
    font-size: 20px;
    }

   nav ul li{
    list-style: none;
    display: inline-block;  /*take this out for vertical list*/
   /*transition: 0.8S all;*/
   vertical-align: top;
   justify-content: space-between;


   /*border-left: 1px solid #fff;
   border-right: 1px solid #ccc;
   width: 16.6667%; /* fallback for non-calc() browsers 
   width: calc(100% / 6);*/
   box-sizing: border-box;
   }


  nav ul li:hover{
 /*background-color: #f39c1a4b;*/
  border-radius: 10px;
  transform: scale(1.2,1.2);


  }

 nav ul li a{
 text-decoration: none;
 font-family: 'Lexend Mega', sans-serif;
 font-size: 100%;
 letter-spacing: .2rem;
 color: #dddcdc;
 padding: 30px;
 text-align: center;
 text-transform: uppercase;
  }
 nav .active-page{

 background-color: rgba(191, 191, 191, 0.336);
 }


   .background{
    background:rgb(91 111 155 / 48%);
    height: 90vh;
    z-index: auto;
    width: auto;
  }

  .randomimages img{
  
  position: fixed;
  top:400px;
  right: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
  }