使用 bootstrap 滚动时粘滞列消失在滚动导航栏后面

Question

我正在尝试使用 bootstrap 让我的左手栏滚动，我已经达到了一定程度的快乐。然而，当我向下滚动页面时，我左手列的顶部消失在滚动导航栏后面。

关于如何解决这个问题有什么建议吗？

已经尝试填充，但即使我在顶部，它也会出现在页面的中间位置。

谢谢。

                <div class="col-md-3">
                    <div class="sticky-top">
                        <h4 class="text-center">Toggle Sections:</h4>
                        <button class="btn btn-outline-primary btn-block mx-auto mb-2" type="button" data-toggle="collapse" data-target="#collapsePerso" aria-expanded="true" aria-controls="collapsePerso">
                            Personal Data & GDPR
                        </button>
                        <button class="btn btn-outline-primary btn-block mx-auto mb-2" type="button" data-toggle="collapse" data-target="#collapsePrivacy" aria-expanded="false" aria-controls="collapsePrivacy">
                            Privacy Policy
                        </button>
                        <button class="btn btn-outline-primary btn-block mx-auto mb-2" type="button" data-toggle="collapse" data-target="#collapseLegal" aria-expanded="false" aria-controls="collapseLegal">
                            Legal Information
                        </button>
                        <button class="btn btn-outline-primary btn-block mx-auto mb-2" type="button" data-toggle="collapse" data-target="#collapseCookies" aria-expanded="false" aria-controls="collapseCookies">
                            Cookies Policy
                        </button>
                    </div>
                </div>

Answer 1

没有足够的代码来重现问题。

我猜你没有考虑导航栏的高度。以下是集成您提供的代码段的固定侧边栏和导航栏的演示。

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
    .sidebar-sticky {
      position: sticky;
      top: 56px; /* Height of navbar */
      height: calc(100vh - 56px);
      padding-top: .5rem;
      overflow-x: hidden;
}</style>
</head>
<body>
    <nav class="navbar sticky-top bg-dark">
      <a class="navbar-brand" href="#">Navigation</a>
    </nav>
   <div class="container-fluid">
      <div class="row">

        <main role="main" class="col-md-8">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            </main>
                    <nav class="col-md-4 d-none d-md-block sidebar">
            <div class="sidebar-sticky">
                <h4 class="text-center">Toggle Sections:</h4>
                <button class="btn btn-outline-primary btn-block mx-auto mb-2" type="button" data-toggle="collapse" data-target="#collapsePerso" aria-expanded="true" aria-controls="collapsePerso">
                    Personal Data & GDPR
                </button>
                <button class="btn btn-outline-primary btn-block mx-auto mb-2" type="button" data-toggle="collapse" data-target="#collapsePrivacy" aria-expanded="false" aria-controls="collapsePrivacy">
                    Privacy Policy
                </button>
                <button class="btn btn-outline-primary btn-block mx-auto mb-2" type="button" data-toggle="collapse" data-target="#collapseLegal" aria-expanded="false" aria-controls="collapseLegal">
                    Legal Information
                </button>
                <button class="btn btn-outline-primary btn-block mx-auto mb-2" type="button" data-toggle="collapse" data-target="#collapseCookies" aria-expanded="false" aria-controls="collapseCookies">
                    Cookies Policy
                </button>
            </div>
        </nav>
      </div>
    </div>

</body>
</html>

使用 bootstrap 滚动时粘滞列消失在滚动导航栏后面

Sticky column while scrolling using bootstrap disappears behind scrolling navbar

html

css

sticky

twitter-bootstrap

bootstrap-4