如何使 Bootstrap 4 Card 在滚动时粘在顶部

Question

当用户向下滚动到导航栏下方时，我正在尝试将 Bootstrap 4 卡片粘在顶部，然后在滚动到页面顶部时将其保留在原来的位置。

我尝试过使用 Bootstrap 的 sticky-top 类以及此处的其他答案，但没有运气。

没有这些溢出属性链接到该项目，overflow overflow-x 等或此问题中建议的任何边距 -Why is my .sticky-top class not working in Bootstrap 4?

我不太了解 Javascript 或 jQuery，所以我已经包含了这些标签，以防万一这是我最好的选择，但 Bootstrap 类应该做我想做的事？

我在这里做了一个codepen - https://codepen.io/grabthereef/pen/pojppmZ

我的代码；

  <!-- First Panel -->
  <section id="first-panel">
    <div class="container">
      <div class="row my-5">
        <div class="col-md-9">
          <div class="row">

            <div class="card mb-3">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <img src="https://via.placeholder.com/150" class="card-img">
                </div>
                <div class="col-md-8">
                  <div class="card-body">
                    <h2 class="card-title"><strong>Get in Contact</strong></h2>
                    <p class="card-text">Give us a call to start the process. We will be there to answer questions you may have and give you some tips on packaging and organising</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="card mb-3">
              <div class="row no-gutters">
                <div class="col-md-8">

                  <div class="card-body">
                    <h2 class="card-title"><strong>Send us your photos and/or VHS tapes</strong></h2>
                    <p class="card-text">Have a look and organise your old photographs into sizes. To get a rough price, simply count or try and guess how many photos you need scanned. If you are sending videos, roughly guess how many hours of footage there is. You can use our easy calculators to work out a rough cost.<br>
                    Carefully package your photographs and videos send your parcel to us via a recorded delivery service such as DHL or UPS. We will confirm receipt of your package. Please read our packing tips</p>
                  </div>
                </div>
                <div class="col-md-4">
                  <img src="https://via.placeholder.com/150" class="card-img">
                </div>
              </div>
            </div>

            <div class="card mb-3">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <img src="https://via.placeholder.com/150" class="card-img">
                </div>
                <div class="col-md-8">
                  <div class="card-body">
                    <h2 class="card-title"><strong>We return your originals and digital media</strong></h2>
                    <p class="card-text">Your photographs and videos will be sent back to you via a trusted courier service along with DVD discs and USB sticks if you require them.</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="card mb-3">
              <div class="row no-gutters">
                <div class="col-md-8">
                  <div class="card-body">
                    <h2 class="card-title"><strong>You enjoy sharing with family and friends</strong></h2>
                    <p class="card-text">This is the best part! Now you have your photos and videos in a digital format you have so many possibilities. You can get them printed onto canvas, t-shirts, share with family, post to social media and so on…. Or maybe you just like the peace of mind knowing your precious memories are now safe.</p>
                  </div>
                </div>
                <div class="col-md-4">
                  <img src="https://via.placeholder.com/150" class="card-img">
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="col-md-3">
          <div id="calculator sticky-top">
            <div class="card text-center">
              <h5 class="card-header heading">Get a Quote!</h5>
              <div class="card-body mt-4">

                <form id="cost-form">
                  <div class="form-group">
                    <input type="number" class="form-control" id="amount" required placeholder="Enter Amount">        
                  </div>
                  <button type="submit" class="btn btn-lightblue mb-4">Calculate</button>
                </form>

                <div id="loading">
                  <img src="" alt="">
                </div>

                <div id="results" class="pt-4">
                  <h5>Results</h5>
                  <h2 id="total-payment">£0.00</h2>
                </div>

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

Answer 1

感谢here 的回答，将置顶添加到您的计算器列：

<div class="col-md-3 sticky-top">
  <div id="calculator">
    <div class="card text-center">
      <h5 class="card-header heading">Get a Quote!</h5>
      <div class="card-body mt-4">

        <form id="cost-form">
          <div class="form-group">
            <input type="number" class="form-control" id="amount" required placeholder="Enter Amount">        
          </div>
          <button type="submit" class="btn btn-lightblue mb-4">Calculate</button>
        </form>

        <div id="loading">
          <img src="" alt="">
        </div>

        <div id="results" class="pt-4">
          <h5>Results</h5>
          <h2 id="total-payment">£0.00</h2>
        </div>

      </div>
    </div>
  </div>
</div>

还有一些额外的 CSS：

.col-md-3.sticky-top {
  align-self: flex-start;
}

Answer 2

引导类“fixed-top”将帮助您解决这个问题。

<div class="fixed-top">...</div>