造型两个单独的NAVS

Question

我正在学习Bootstrap 4，并通过此链接找到了一个N​​avbar： https://carrabbasatlanticcanada.com/

为Bootstrap4找到可滚动的滚动导航，该导航在滚动时更改了样式（在移动视图上没有徽标和位置）。

我创建了一个像链接中使用的Navbar一样，它使用了2个样式的SEPERATE NAVS，以相同的方式工作：可见的NAV和徽标，然后是无徽标的可滚动导航，以及在移动设备上固定的NAV和固定NAV。

我觉得这是BS4的最小代码解决方案，并且可能会出现问题的问题，而在Internet Explorer中不起作用的位置粘性？

我仍然是编码的新手。这个代码还可以吗？ 可以使用2个单独的NAVS，还是可以使用1个NAV和一些JavaScript进行造型？

最受欢迎的任何反馈或可能的改进！

HTML：

 <nav class="navbar navbar-expand-md  mynav">
      <!-- Brand -->
      <a class="navbar-brand" href="#">Navbar</a>
    
      <!-- Toggler/collapsibe Button -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-       target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <!-- Navbar links -->
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav text-center">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#news">News</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav> 

<div id="navbar2">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div> 

<!--Javascript for scrollable nav-->
<script type="text/javascript">

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 120 || document.documentElement.scrollTop > 120) {
    document.getElementById("navbar2").style.top = "0";
  } else {
    document.getElementById("navbar2").style.top = "-50px";
  }
} 
</script>

CSS： /固定navbar /

.mynav{
    background-color: black;
}

.navbar .navbar-nav li a, .navbar-brand{
    color: white;
}

.navbar-toggler{
    background-color: green;
}

/*Scrollable navbar*/
  #navbar2 {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: -450px; /* Hide the navbar 50 px outside of the top view */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

/* Style the navbar links */
#navbar2 a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

#navbar2 a:hover {
  background-color: #ddd;
  color: black;
}

/media queries to make the pop down nav disappear on small screens and the hambrger to be fixed/   
@media screen and (max-width: 600px){

  #navbar2{
    display: none;
  }

  .mynav{
    position: fixed;
    width: 100%;

  }

  .top-bar{
    display: none;
  }


.header-area{
  background-color: #000;
  height: 20px;
}

}

@media screen and (min-width: 600px){

  #navbar2{
    visibility: visible;
  }

  .navbar-toggler{
    visibility: hidden;
  }
}