Question

我的导航栏中有6个字段。其中5个是链接，一个是下拉列表。当我滚动页面时，除下拉字段外，所有字段均保持固定。enter image description here

下面是我的代码：

<div class="collapse navbar-collapse" id="Food-fair-toggle">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">about</a></li>
    <li><a href="#pricing">menu</a></li>
    <li><a href="#featured-dish">featured</a></li>
    <li><a href="#reserve">reservation</a></li>
    <li><a href="#contact">contact</a></li>
    <li>
      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="https://deliveroo.nl/">Deliveroo</a>
          <a href="https://www.foodora.nl/">Foodora</a>
          <a href="https://www.ubereats.com//">UberEats</a>
        </div>
      </div>
    </li>
  </ul>
</div>
<!-- /.navbar-collapse -->

Answer 1

您可以尝试下面的菜单栏以及下拉菜单。

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_dropdown&stacked=h

Answer 2

请尝试以下HTML，JS和CSS。只需更改结构，为同一类创建单独的下拉列表。然后，必须为菜单UL添加id属性。

HTML：

<div class="collapse navbar-collapse" id="Food-fair-toggle">
  <ul class="nav navbar-nav navbar-right" id="myHeader">
    <li><a href="#about">about</a></li>
    <li><a href="#pricing">menu</a></li>
    <li><a href="#featured-dish">featured</a></li>
    <li><a href="#reserve">reservation</a></li>
    <li><a href="#contact">contact</a></li>    
  </ul>
  <ul class="nav navbar-nav navbar-right">
   <li>
      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="https://deliveroo.nl/">Deliveroo</a>
          <a href="https://www.foodora.nl/">Foodora</a>
          <a href="https://www.ubereats.com//">UberEats</a>
        </div>
      </div>
    </li>
  </ul>
</div>

JS：

将JS复制并粘贴到页脚部分。

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

    var header = document.getElementById("myHeader");
    var sticky = header.offsetTop;

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

CSS：

ul.sticky {
    position: fixed !important;
    background: #27752A;
}

Answer 3

以下示例显示了如何在bootstrap-4导航栏中添加下拉菜单。

如果要将导航栏固定在顶部，则可以在class='fixed-top'组件中添加<nav>，然后在向下滚动时菜单将停留在顶部。

或者，如果您不想在顶部固定导航栏菜单，则可以从导航栏中删除该类fixed-top。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="bg-success navbar navbar-dark navbar-expand-sm">
  

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#about">ABOUT</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#pricing">MENU</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#featured-dish">FEATURED</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#reserve">RESERVATION</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#contact">CONTACT</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        DROPDOWN
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="https://deliveroo.nl/">Deliveroo</a>
          <a class="dropdown-item" href="https://www.foodora.nl/">Foodora</a>
          <a class="dropdown-item" href="https://www.ubereats.com//">UberEats</a>
      </div>
    </li>
  </ul>
</nav>
<br>
  
<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu in the fixed navbar on Top,This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top.</p>
</div>

</body>
</html>

如何在滚动时固定导航栏中的按钮

3 个答案: