在视差区域内包含卡

时间：2018-11-03 00:40:42

标签： jquery html css bootstrap-4

我正在学习Bootstrap，目前正在尝试在具有视差背景的div中显示价目表。全屏看起来一切正常，但是当我调整窗口大小时，卡片被放置在其他部分上。我希望视差背景能够覆盖所有三张卡，即使它们彼此之间也是如此。

这是我的JS小提琴：https://jsfiddle.net/s1a20fe6/ 

$(document).ready(function() {
  // Add scrollspy to <body>
  $('body').scrollspy({
    target: ".navbar",
    offset: 50
  });

  $('.scrollToTop').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: 0
    }, 800);

  });

  // Add smooth scrolling on all links inside the navbar
  $(".nav-link").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

jQuery(window).scroll(function() {
  if (jQuery(this).scrollTop() > 300) {
    jQuery('.scrollToTop').fadeIn();
  } else {
    jQuery('.scrollToTop').fadeOut();
  }
});
body {
  position: relative;
}

#section1 {
  height: 100vh;
  color: #fff;
  background-color: black;
}

#section2 {
  padding-top: 100px;
  height: 100vh;
  color: #fff;
  background-color: #c4c4c4;
}

#section3 {
  height: 90vh;
  background-color: black;
}

#section4 {
  padding-top: 100px;
  height: 100vh;
  color: #fff;
  background-color: #c4c4c4;
}

#section5 {
  padding-top: 100px;
  height: 100vh;
  color: #fff;
  background-color: grey;
}

.extra-padding {
  padding-top: 100px;
}

.navbar {
  background-color: white;
}

.nav-item {
  text-align: center;
}

.nav-pills .pill1 .nav-link:not(.active) {
  background-color: white;
  color: black;
}

.nav-pills .pill1 .nav-link {
  background-color: white;
  color: #0069D9;
}

a:hover {
  color: #0069D9 !important;
}

.carousel-item {
  opacity: 0.8;
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.scrollToTop {
  bottom: 20px;
  color: #ffffff !important;
  display: none;
  font-size: 30px;
  line-height: 50px;
  position: fixed;
  right: 20px;
  text-align: center;
  text-decoration: none;
  width: 55px;
  z-index: 999;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  height: 55px;
  border-radius: 50%;
  background-color: #0069D9 !important;
}

.scrollToTop:hover {
  background-color: green;
  color: #ffffff !important;
}

.parallax {
  background-image: url("https://images.pexels.com/photos/1547737/pexels-photo-1547737.jpeg");
  opacity: 1;
  height: 90vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.pricing .card {
  border: none;
  border-radius: 1rem;
  transition: all 0.2s;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing hr {
  margin: 1.5rem 0;
}

.pricing .card-title {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  letter-spacing: .1rem;
  font-weight: bold;
}

.pricing .card-price {
  font-size: 3rem;
  margin: 0;
}

.pricing .card-price .period {
  font-size: 0.8rem;
}

.pricing ul li {
  margin-bottom: 1rem;
}

.pricing .text-muted {
  opacity: 0.7;
}

.pricing .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
}


/* Hover Effects on Card */

@media (min-width: 992px) {
  .pricing .card:hover {
    margin-top: -1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
  }
  .pricing .card:hover .btn {
    opacity: 1;
  }
}

button:focus {
  outline: none;
}
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">

  <a class="navbar-brand nav-link" href="#section1"><img src="https://logosbynick.com/wp-content/uploads/2018/03/final-logo-example.png" height="61px" alt="Logo img"></a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars"></i>
          </button>

  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto nav nav-pills">
      <li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section1">Home</a></li>
      <li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section2">Info</a></li>
      <li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section3">Producten</a></li>
      <li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section4">Contact</a></li>
      <li class="nav-item pill1" data-toggle="collapse" data-target=".navbar-collapse.show"><a class="nav-link" href="#section5">Webshop</a></li>
    </ul>
  </div>
</div>
</nav>

<div id="section1">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-pause="false">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active" style="background-image: url('https://images.pexels.com/photos/1198817/pexels-photo-1198817.jpeg')">
        <div class="carousel-caption d-none d-block">
          <h3>First Slide</h3>
          <p>This is a description for the first slide.</p>
        </div>
      </div>
      <div class="carousel-item" style="background-image: url('https://images.pexels.com/photos/1105655/pexels-photo-1105655.jpeg')">
        <div class="carousel-caption d-none d-block">
          <h3>Second Slide</h3>
          <p>This is a description for the second slide.</p>
        </div>
      </div>
      <div class="carousel-item" style="background-image: url('https://images.pexels.com/photos/1547729/pexels-photo-1547729.jpeg')">
        <div class="carousel-caption d-none d-block">
          <h3>Third Slide</h3>
          <p>This is a description for the third slide.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="section2" class="container-fluid">
  <h1>Section 2</h1>
  <p></p>
</div>
<div id="section3">
  <div class="parallax  extra-padding">
    <section class="pricing py-5">
      <div class="container">
        <div class="row">
          <!-- Free Tier -->
          <div class="col-lg-4">
            <div class="card mb-5 mb-lg-0">
              <div class="card-body">
                <h5 class="card-title text-muted text-uppercase text-center">Free</h5>
                <h6 class="card-price text-center">$0<span class="period">/month</span></h6>
                <hr>
                <ul class="fa-ul">
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
                  <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>
                  <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>
                  <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>
                  <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
                </ul>
                <a href="#" class="btn btn-block btn-primary text-uppercase">Meer info</a>
              </div>
            </div>
          </div>
          <!-- Plus Tier -->
          <div class="col-lg-4">
            <div class="card mb-5 mb-lg-0">
              <div class="card-body">
                <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>
                <h6 class="card-price text-center">$9<span class="period">/month</span></h6>
                <hr>
                <ul class="fa-ul">
                  <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>
                  <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
                </ul>
                <a href="#" class="btn btn-block btn-primary text-uppercase">Meer info</a>
              </div>
            </div>
          </div>
          <!-- Pro Tier -->
          <div class="col-lg-4">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>
                <h6 class="card-price text-center">$49<span class="period">/month</span></h6>
                <hr>
                <ul class="fa-ul">
                  <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>
                  <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>
                </ul>
                <a href="#" class="btn btn-block btn-primary text-uppercase">Meer info</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
<div id="section4" class="container-fluid">
  <h1>Section 4</h1>
  <p></p>
</div>
<div id="section5" class="container-fluid">
  <h1>Section 5</h1>
  <p></p>
</div>



<a class="scrollToTop" href="#">
  <i class="fas fa-angle-up"></i>
</a>

0 个答案:

没有答案
相关问题
最新问题