html - NAVBAR 响应从固定到不固定

Question

我正在制作一个响应式导航栏，但遇到了问题。固定导航栏是正确的并且工作正常。滚动时它会改变透明度，但我不希望将汉堡菜单（当设备很小时）固定到位。我怎样才能从修复中改变？我应该改变什么属性？我为此使用引导程序。谢谢！

$(function() {
  $(window).on('scroll', function() {
    if ($(window).scrollTop() > 10) {
      $('.navbar').addClass('active');
    } else {
      $('.navbar').removeClass('active');
    }
  });
});

function scrollValue() {
  var navbar = document.getElementById('navbar');
  var scroll = window.scrollY;
  if (scroll < 200) {
    navbar.classList.remove('BgColour');
  } else {
    navbar.classList.add('BgColour');
  }
}
window.addEventListener('scroll', scrollValue);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
  <div id="navbar" class="navbar">
    <nav class="navbar navbar-expand-lg fixed-top bg">

      <img src="images/logo.png" class="img-fluid" id="weblogo" onclick="submitToPage1();" alt="Image Not Found">
      <a href="#Home" id="busname" onclick="submitToPage1();"> VITALY TEA</a>
      <div class="container-fluid">



        <button type="button " data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right navbar-static-top container-hamburger "><i class="fa fa-bars"></i></button>

        <div id="navbarSupportedContent" class="collapse navbar-collapse">
          <ul class="navbar-nav ml-auto ">

            <li class="nav-item dropdown" id="navbtn">
              <a class="nav-link dropdown-toggle" href="#Services" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="submitToPage2();">
                    Services
                    <span class="sr-only">(current)</span></a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="subnav">
                <a class="dropdown-item" href="#">Digital Printing</a>
                <a class="dropdown-item" href="#">Binding</a>
                <a class="dropdown-item" href="#">Laminating</a>
                <a class="dropdown-item" href="#">Cutting</a>

              </div>

            </li>

            <li class="nav-item dropdown" id="navbtn">
              <a class="nav-link dropdown-toggle" href="#Menu" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="submitToPage3();"> Menu
                  </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="subnav2">
                <a class="dropdown-item" href="#">Warm Drinks</a>
                <a class="dropdown-item" href="#">Cold Drinks</a>
                <a class="dropdown-item" href="#">Sandwiches</a>

              </div>
            </li>

            <li class="nav-item"><a class="nav-link" id="navbtn2" href="#Orderr" onclick="submitToPage4();">
                    Order </a></li>
            <li class="nav-item"><a class="nav-link" id="navbtn2" href="#About" onclick="submitToPage5();">
                    About </a></li>
            <li class="nav-item"><a class="nav-link" id="navbtn2" href="#Contact" onclick="submitToPage6();">
                    Contact </a></li>
            <li class="nav-item"><a class="nav-link" id="navbtn2" href="#Link" onclick="submitToPage7();"> Link
                  </a> </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</header>

标签： htmlcss