是否可以将 jumbotron 和导航栏固定到屏幕顶部？

Question

我正在使用 Bootstrap 构建我的网站，并且我希望将页眉和导航栏保留在页面顶部，因为其余内容在其下方滚动。我知道您可以使用 Bootstrap 将导航栏固定到顶部，但是有没有办法将 jumbotron 也固定到顶部？

我当前的代码是：

<div class="jumbotron">
      <img class="jumbotron-img-top" src="images/headerwithtag.png">
    </div>

  <nav class="navbar">
      <ul class="nav navbar-nav">
        <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      BOOKS
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Branding Sutra</a>
    </div>
  </li>
  <li class="nav-item">
          <a class="nav-link" href="#">SERVICES</a>
  </li>
  <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
  </li>
  </ul>
  </nav>

而带有is的css是：

.jumbotron {
          background-color: white;
      }

      .jumbotron-img-top {
          width:100%;
      }

      .navbar {
          background-image: url("images/navbarbgnew.png");
          background-size: cover;
          margin: -30px 0 15px 0;
      }

我只是不确定我需要什么才能将这两个东西都固定到顶部，同时仍然填满整个屏幕。

Answer 1

将position: fixed 添加到 .jumbotron 类，然后设置top: 0 以将元素固定到浏览器视口的最顶部。我会设置一个width:100% 作为位置：固定会缩小你的元素。

  .jumbotron {
      background-color: white;
      position: fixed;
      top: 0;
      width: 100%;
  }

.jumbotron {
          background-color: white;
          position: fixed;
          width: 100%;
          top: 0;
      }

      .jumbotron-img-top {
          width:100%;
      }

      .navbar {
          background-image: url("images/navbarbgnew.png");
          background-size: cover;
          margin: -30px 0 15px 0;
      }
      .long-content-sample {
          height: 1000px;
          background: #ccc;
      }

<div class="jumbotron">
      <img class="jumbotron-img-top" src="images/headerwithtag.png">
      .jumbotron element
    </div>

  <nav class="navbar">
      <ul class="nav navbar-nav">
        <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      BOOKS
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Branding Sutra</a>
    </div>
  </li>
  <li class="nav-item">
          <a class="nav-link" href="#">SERVICES</a>
  </li>
  <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
  </li>
  </ul>
  </nav>
  <div class="long-content-sample">Scroll down<div>

Answer 2

最简单的方法 -- 仅使用 Bootstrap 4 原生类 而不使用任何自定义 css -- 将 jumbotron 和导航栏都修复到屏幕顶部，是将它们都包装在一个带有 sticky-top 类的 div 中，就像这样（单击下面的“运行代码 sn-p”按钮并展开到整页进行检查）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="sticky-top">
    <div class="jumbotron jumbotron-fluid bg-white my-0 py-0">
        <img class="img-fluid" src="https://picsum.photos/2000/200">
    </div>

    <nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    BOOKS
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Branding Sutra</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">SERVICES</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ABOUT</a>
            </li>
        </ul>
        </div>
    </nav>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-9 col-sm-6 col-md-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium fugit veritatis ipsam possimus iste ipsum aut cupiditate earum eveniet vel minus laudantium eligendi, et blanditiis tempore itaque enim facere dolorum deserunt obcaecati autem? <br><br> Dolorem earum enim est, voluptas harum eveniet pariatur! Amet, ipsum necessitatibus explicabo repellat quisquam, eum nam, cupiditate excepturi sed magni, natus commodi deserunt cum praesentium provident debitis dolore ducimus expedita totam non. A sed praesentium dolorum doloremque ipsa nesciunt quis inventore fugiat voluptatum, deleniti, rem. <br><br> Animi iure obcaecati fuga repellendus porro repellat et necessitatibus maiores, explicabo veniam totam molestiae dolorem deleniti, accusamus aperiam vitae. Provident, sapiente! Facere labore explicabo illo incidunt quas laborum placeat sunt perspiciatis suscipit ducimus esse distinctio molestiae expedita ipsam animi iste delectus id, cum est possimus quos eveniet similique necessitatibus. Tempora itaque impedit aperiam asperiores ullam qui, non explicabo dignissimos odio dicta ipsam molestias officia libero porro aliquid quod deleniti magni tempore similique magnam amet sapiente. <br><br> Laboriosam consectetur suscipit voluptatem, debitis, minus repellat iure cum odio illum explicabo deleniti. Repellat ad et quaerat, fuga quis iste a autem illo repellendus iusto ipsum nesciunt eius fugit, repudiandae, voluptates? Alias voluptate reiciendis esse libero sed debitis deserunt totam, repellat. Iusto soluta, corporis animi nesciunt optio corrupti non aut ad magnam beatae illo voluptatibus iste quidem numquam impedit reiciendis similique nihil omnis odio quod? Molestiae repellendus atque, adipisci.
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 3

将position: fixed;或position: sticky添加到您必须以固定方式定位的DOM节点。

https://developer.mozilla.org/en-US/docs/Web/CSS/position