如何将粘性 div 保持在固定标题下方

Question

我在我的项目中使用 Bootstrap 4，并且在固定导航栏下保留带有“sticky-top”类的 div 似乎遇到问题。我尝试过使用 javascript 来替换滚动上的 css，但这似乎不起作用。我知道有一种方法可以为导航栏设置一个 id 并告诉它不要滚动超过该点，但我似乎无法通过 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;具体取决于您想要粘性行为还是固定行为。

这是一个描述粘性行为的jsfiddle 。