css - 具有位置的中心导航栏 css：固定

问题描述

我有一个位置：固定的导航栏，但是当我向下滚动页面时它没有居中。宽度为 90%，高度为自动。我包括了我现在拥有的东西，但它不起作用。有任何想法吗？

.sticky {
  position: fixed;
  width: 90%;
  height:auto;
  top: 0;
  right:0;
  left:0;
  margin: 0 auto;
}


<script>
        
        window.onscroll = function() {myFunction()};

        
        var navbar = document.getElementById("navbar");

        
        var sticky = navbar.offsetTop;

        function myFunction() {
          if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
          } else {
            navbar.classList.remove("sticky");
          }
        }
    </script>

这是用于创建导航栏的 HTML

    <nav class="navbar navbar-inverse" style="background-color:#3A9DFA; width:80%">
  <div class="container-fluid" id="navbar">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="index.html"  style="color:#ffffcc">Music Moves</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:#3A9DFA; color:#ffffcc">Months<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="october20.html">October 2020</a></li>
            <li><a href="november20.html">November 2020</a></li>
            <li><a href="december20.html">December 2020</a></li>
          </ul>
        </li>
        <li><a href="#top"  style="color:#ffffcc">Top</a></li>
        <li class="dropdown active">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:#3A9DFA; color:#ffffcc">Song's from October<span class="caret"></span></a>
          <ul class="dropdown-menu">
           <li><a href="#chandelier">Chandelier</a></li>
           <li><a href="#talkhouse">Talkhouse</a></li>
           <li><a href="#savagemode2">Savage Mode 2</a></li>
          </ul>
        </ul>
        
        <form class="navbar-form navbar-right" action="/action_page.php">
           <div class="form-group">
                 <input type="text" class="form-control" placeholder="Search">
           </div>
           <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
  </div>
</nav>

标签： cssnavbarcentersticky

css - 具有位置的中心导航栏 css：固定

问题描述

解决方案

推荐阅读