Как сохранить липкий div ниже фиксированного заголовка

Question

Я использую Bootstrap 4 в своем проекте, и у меня, похоже, возникают проблемы с сохранением div с классом «sticky-top» прямо под фиксированной панелью навигации.Я пытался использовать JavaScript для замены CSS на прокрутке, но это не похоже на работу.Я знаю, что есть способ установить идентификатор для панели навигации и запретить ему прокручивать эту точку, но я не могу показаться Google достаточно хорошим, чтобы найти решение.Любая помощь с благодарностью.

Ниже код, который я использую.

<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

Элемент div, который вы хотите разместить под панелью навигации, может иметь стиль top: ##px; (где ## - высота пикселя панели навигации, под которой вы хотите, чтобы она проходила).А затем также добавьте либо position: sticky;, либо position: fixed; в зависимости от того, хотите ли вы залипание или фиксированное поведение.

Я подозреваю, что то, что вы на самом деле хотите, здесь исправлено, а не залипает.