Bootstrap 4 - 透明粘性导航栏

时间：2018-02-03 18:03:48

标签： jquery html css twitter-bootstrap bootstrap-4

我目前正在开发一个带有粘性导航的页面，但我的主要问题是我使用多个部分将图像作为背景，导航当然是透明的。非常重要的是徽标位于导航栏上方，因此我必须使用display: sticky;（或.sticky-top）。如何在每个部分显示它？

html,
body {
  width: 100% !important;
}

body {
  background: grey !important;
}


/*Header*/

.logo {
  display: inline-block;
  padding: 1rem 0 .5rem 0 !important;
}


/* NavBar */

nav {
  font-size: 13pt;
  font-family: 'Cinzel', sans-serif;
  padding: .3rem 0 .3rem 0 !important;
  text-transform: capitalize;
}

.nav-link {
  color: #fff !important;
  margin: 0 25% 0 25%;
}

.nav-link:hover {
  font-style: underline;
}

section {
  height: 100vh;
  min-height: 900px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Text {
  margin-top: 20%;
}
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="stylesheet/stylesheet.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
  <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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>

<body>
  <main class="container-fluid p-0">
    <section class="pr-5 pl-5" style="background-image: url('https://picsum.photos/1920/1080/?random');">
      <header>
        <img class="logo d-block img-fluid mx-auto" width="200px" src="http://brandmark.io/logo-rank/random/pepsi.png" alt="Logo" />
      </header>
      <nav class="navbar navbar-expand-lg sticky-top">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
                        </button>
        <div class="collapse navbar-collapse" id="Toogle">
          <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Repliky</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Unikáty</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Instalace</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Kontakt</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="row Text no-gutters ">
        <div class="col-xs-12 col-md-4 offset-md-1">
          <h2>I need this block of text to be responsive</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p>
          <a href="#" class="button white">Watch video</a>
        </div>
      </div>
    </section>
    <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random');">
      <p>nofun</p>
    </section>
    <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random');">
      <p>nofun</p>
    </section>
  </main>
</body>

</html>

2 个答案:

答案 0 :(得分：2)

Here's the solution:

Take the navbar and the logo out and place them above all sections. The logo and the navbar together are 256px high.

So, apply margin-top: -256px; padding-top: 256px; to the first section and you're done!

margin-top: -256px; moves the first section up 256px and padding-top: 256px; gives it 265px top padding. That makes the whole thing look the same as before but now your navbar and logo header are independent from the sections. That's why it works.

Here's the full, working code snippet (click "run code snippet" below and expand to full page): 

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

<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>

<main class="container-fluid p-0">
    <header>
        <img class="logo d-block img-fluid mx-auto" width="200px" src="http://brandmark.io/logo-rank/random/pepsi.png" alt="Logo" />
    </header>
    <nav class="navbar navbar-expand-lg sticky-top">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
        </button>
        <div class="collapse navbar-collapse" id="Toogle">
            <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Repliky</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Unikáty</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Instalace</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Kontakt</a>
                </li>
            </ul>
        </div>
    </nav>

    <section class="pr-5 pl-5" style="background-image: url('https://picsum.photos/1920/1080/?random'); margin-top: -256px; padding-top: 256px;">
        <div class="row Text no-gutters">
            <div class="col-xs-12 col-md-4 offset-md-1">
                <h2>I need this block of text to be responsive</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p>
                <a href="#" class="button white">Watch video</a>
            </div>
        </div>
    </section>
    <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random'); height: 999px;">
        <p>section 2</p>
    </section>
    <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random'); height: 999px;">
        <p>section 3</p>
    </section>
</main>

答案 1 :(得分：0)

创建一个名为transparent的css类，并使用此代码。

.navbar .transparent .navbar-inverse .navbar-inner {
    background-color: rgba(92, 184, 92, 0.8);
}

导航栏代码：

<nav class="navbar fixed-top navbar-light navbar-toggleable-md navbar-inverse transparent">

.....

</nav>
相关问题
最新问题