导航栏不粘在滚动条上

问题描述 投票：0回答：1

我有一个带有以下html的navbar react组件，它使用引导程序。我希望它在滚动到顶部时停留在顶部（上方有内容页面）。我尝试将position-sticky应用于包装div，也将sticky-top应用于导航本身，但这些都不起作用。它只是滚动到视图之外。

<div className="d-none d-md-block position-sticky">
      <nav className="navbar sticky-top bg-dark navbar-dark navbar-expand">
        <a className="navbar-brand" href="#initialImage">
          name
        </a>
        <ul className="navbar-nav">
          <li className="nav-item">
            <a className="nav-link text-white font-weight-bold" href="#">
              Home
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link text-white font-weight-bold" href="#">
              Shop Collection One
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link text-white font-weight-bold" href="#">
              Shop Collection Two
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link text-white font-weight-bold" href="#">
              A Message 
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link text-white font-weight-bold" href="#">
              Contact
            </a>
          </li>
        </ul>
      </nav>
    </div>
bootstrap-4 position css-position navbar
1个回答
0
投票

似乎您在标记中有一些不正确和不必要的内容。

  1. 您无需使用单独的div即可使BS Navbar响应。 BS为此提供了一个内置的类。

  2. 接下来，您的li项目不正确。当我甚至使用BS样式表链接使用您的代码时，它仍然显示正常的ul链接。

我已经为您格式化了链接（摘自w3schools，并已根据您的要求进行了修改。

请注意：运行代码段时，由于屏幕尺寸大，您可能会发现链接的某些异常行为。我建议您在Web浏览器中运行此代码。使用的引导程序版本为4.0。

VERSION 1：此版本很简单。只需在滚动时粘贴导航栏即可。

<!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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body style="height:1500px">

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#">My WebsiteName</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Shop Collection One</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shop Collection Two</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">A Message</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </nav>

  <div class="container-fluid" style="margin-top:80px">
    <h3>Top Fixed Navbar</h3>
    <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
    <h1>Scroll this page to see the effect</h1>
  </div>

</body>

</html>

VERSION 2：此导航栏是对版本1的修改，该导航栏最初并不粘滞，但是当您滚动并达到一定的滚动量时，它会导航栏。

<!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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body style="height:1500px">

  <div class="container-fluid">
    <br>
    <h3>Hello World</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </div>

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
    <a class="navbar-brand" href="#">MyWebSite</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shop Collection One</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shop Collection Two</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">A Message</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </nav>

  <div class="container-fluid"><br>
    <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
    <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
    <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
    <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
  </div>

</body>

</html>

希望这会有所帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.