Блог

Я использую 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 amp; 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;}
  

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

Вот jsfiddle с описанным поведением залипания.