Как сделать карточку Bootstrap 4 липкой вверху при прокрутке

Question

Я пытаюсь сделать карту Bootstrap 4 прикрепленной к верху под панелью навигации, когда пользователь прокручивает ее вниз, а затем оставляет ее на исходном месте при прокрутке к верхней части страницы.

Я попытался использовать класс Bootstrap sticky-top, а также другие ответы здесь, но безуспешно.

Нет ни одного из этих свойств переполнения, связанных с элементом, overflow overflow-x et c или любые поля, предложенные в этом вопросе - Почему мой класс .sticky-top не работает в Bootstrap 4?

Я не знаю Javascript или jQuery очень хорошо, поэтому я включил эти теги на случай, если это мой лучший вариант, но класс Bootstrap должен делать то, что я хочу?

Я сделал здесь код - 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

Благодаря этому ответу здесь , добавьте липкий верх в столбец вашего калькулятора:

<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

Bootstrap класс "fixed-top" поможет вам решить эту проблему.

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