javascript - 如何仅采用Materialize Navbar所需的代码？

Question

我正在尝试添加Materialize Navbar，但添加它没有问题，但是由于它很大，我当前的标题标签，li标签以及其他标签，它覆盖了我当前的代码。需要一个吗？可能吗我尝试用控制台来做，但这只是很多代码。

[JS Fiddle][1]
[1]: https://jsfiddle.net/yw5xad79/1/

任何帮助都将非常重要！

Answer 1

对于您的评论：


  我来了：jsfiddle.net/yw5xad79/1，但是正如您看到的nav不是固定在顶部，如何实现呢？


您只需要添加一些CSS使其位于顶部即可：

nav {
  position: fixed !important;
  width: 100%;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" rel="stylesheet">

<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js"></script>

<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg navbar-dark info-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
    aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent-4">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">
          <i class="fab fa-facebook-f"></i> Facebook
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="fab fa-instagram"></i> Instagram</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          <i class="fas fa-user"></i> Profile </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
          <a class="dropdown-item" href="#">My account</a>
          <a class="dropdown-item" href="#">Log out</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<!--/.Navbar -->
<ul>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
  <li>Make page longer to create scrollbar</li>
</ul>