title: How to keep a sticky div below a fixed header
body: <p>I am using Bootstrap 4 in my project and I seem to be having a problem keeping a div with the class "sticky-top" just under a fixed navbar. I've tried using javascript to replace the css on scroll, but that doesnt seem to work. I know there is a way to set an id to the navbar and tell it not to scroll past that point, but I cant seem to Google well enough to find the solution. Any help is greatly appreciated.</p>
  
  <p>Below is the code I am using.</p>
  
  <pre><code>&lt;header class="header_area"&gt;
  &lt;nav class="navbar navbar-expand-lg menu_one menu_four"&gt;
      &lt;div class="container"&gt;
          &lt;a class="navbar-brand sticky_logo" href="#"&gt;&lt;img src="images/upayify-logo-white.png" srcset="images/logo2x-2.png 2x" alt="logo"&gt;&lt;img src="images/upayify-logo.png" srcset="images/logo2x.png 2x" alt=""&gt;&lt;/a&gt;
          &lt;button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="menu_toggle"&gt;
                          &lt;span class="hamburger"&gt;
                              &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                          &lt;/span&gt;
                          &lt;span class="hamburger-cross"&gt;
                              &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
              &lt;ul class="navbar-nav menu w_menu ml-auto"&gt;
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href="index.php"&gt;
                          &lt;i class="fa fa-home"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;
                          How It Works
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"&gt;&lt;i class="fa fa-lock"&gt;&lt;/i&gt; Login&lt;/a&gt;
          &lt;a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"&gt;&lt;i class="fa fa-user-plus"&gt;&lt;/i&gt; Sign Up&lt;/a&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>  &lt;div class="row row-eq-height featured_item"&gt;
                  &lt;div class="col-md-5 send-card order-md-last"&gt;
                      &lt;div id="get-started" class="card sticky-top"&gt;
                          &lt;div class="card-body"&gt;
                              &lt;form&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-12 form-group"&gt;
                                          &lt;label for="exampleInputEmail1"&gt;I'm sending money from...&lt;/label&gt;
                                          &lt;div class="input-group mb-2"&gt;
                                              &lt;div class="input-group-prepend"&gt;
                                                  &lt;div class="input-group-text"&gt;&lt;span class="flag-icon flag-icon-us"&gt;&lt;/span&gt;&lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;select class="form-control"&gt;
  
                                              &lt;/select&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-12 form-group mt-2 mb-0"&gt;
                                          &lt;label&gt;I'm sending to...&lt;/label&gt;
                                          &lt;div class="input-group mb-2"&gt;
                                              &lt;div class="input-group-prepend"&gt;
                                                  &lt;div class="input-group-text"&gt;&lt;span class="flag-icon flag-icon-in"&gt;&lt;/span&gt;&lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;select  class="form-control"&gt;
  
                                              &lt;/select&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-12"&gt;
                                          &lt;hr&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-12 mb-3 text-center conversion"&gt;
                                          &lt;span class="flag-icon flag-icon-us mr-2"&gt;&lt;/span&gt;1 &lt;span class="mr-2 ml-2"&gt;=&lt;/span&gt; &lt;span class="flag-icon flag-icon-in mr-2"&gt;&lt;/span&gt;69.64
                                      &lt;/div&gt;
                                      &lt;div class="col-12 mt-2 index-form-btn"&gt;
                                          &lt;a href="#" class="btn_hover agency_banner_btn pay_btn pay_btn_two btn-block"&gt;&lt;i class="fa fa-rocket"&gt;&lt;/i&gt; Get Started Now!&lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-12 text-center"&gt;
                                          &lt;p class="small"&gt;View &lt;a href="#"&gt;Terms &amp; Conditions&lt;/a&gt; for more details and fees&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-7 d-flex order-md-first"&gt;
                      &lt;div class="row"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
  .send-card{
  top: -225px;
  z-index: 4;
  margin-bottom: -200px;}
  </code></pre>