How to keep a sticky div below a fixed header

Question

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.

Below is the code I am using.

<header class="header_area">
<nav class="navbar navbar-expand-lg menu_one menu_four">
    <div class="container">
        <a class="navbar-brand sticky_logo" href="#"><img src="images/upayify-logo-white.png" srcset="images/logo2x-2.png 2x" alt="logo"><img src="images/upayify-logo.png" srcset="images/logo2x.png 2x" alt=""></a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="menu_toggle">
                        <span class="hamburger">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                        <span class="hamburger-cross">
                            <span></span>
                            <span></span>
                        </span>
                    </span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav menu w_menu ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.php">
                        <i class="fa fa-home"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        How It Works
                    </a>
                </li>
            </ul>
        </div>
        <a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-lock"></i> Login</a>
        <a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-user-plus"></i> Sign Up</a>
    </div>
</nav>

  <div class="row row-eq-height featured_item">
                <div class="col-md-5 send-card order-md-last">
                    <div id="get-started" class="card sticky-top">
                        <div class="card-body">
                            <form>
                                <div class="row">
                                    <div class="col-12 form-group">
                                        <label for="exampleInputEmail1">I'm sending money from...</label>
                                        <div class="input-group mb-2">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><span class="flag-icon flag-icon-us"></span></div>
                                            </div>
                                            <select class="form-control">

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 form-group mt-2 mb-0">
                                        <label>I'm sending to...</label>
                                        <div class="input-group mb-2">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><span class="flag-icon flag-icon-in"></span></div>
                                            </div>
                                            <select  class="form-control">

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <hr>
                                    </div>
                                    <div class="col-12 mb-3 text-center conversion">
                                        <span class="flag-icon flag-icon-us mr-2"></span>1 <span class="mr-2 ml-2">=</span> <span class="flag-icon flag-icon-in mr-2"></span>69.64
                                    </div>
                                    <div class="col-12 mt-2 index-form-btn">
                                        <a href="#" class="btn_hover agency_banner_btn pay_btn pay_btn_two btn-block"><i class="fa fa-rocket"></i> Get Started Now!</a>
                                    </div>
                                    <div class="col-12 text-center">
                                        <p class="small">View <a href="#">Terms & Conditions</a> for more details and fees</p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-7 d-flex order-md-first">
                    <div class="row">

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


.send-card{
top: -225px;
z-index: 4;
margin-bottom: -200px;}

Answer 1

The div you want under the navbar can get styled with top: ##px; (where ## is the pixel height of the navbar you want it to go under). And then also add either position: sticky; or position: fixed; depending whether you want the sticky behavior or the fixed behavior.

Here's a jsfiddle with the described sticky behaviour.