Search code examples
htmlcsstwitter-bootstrapbootstrap-4sticky

Sticky column while scrolling using bootstrap disappears behind scrolling navbar

I am trying to make my left hand column scroll using bootstrap which I have achieved to a certain degree of happiness. However the top part of my left hand col disappears behind the scrolling navbar when I scroll down the page.

Any suggestions of how I would fix this?

Have tried padding but then it appears half way down the page even when I am at the top.

Thanks.

                <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>
Solution

  • There is not enough code to reproduce the problem.

    My guess is you didn't take the height of the navbar into account. Following is a Demo of a fixed sidebar and navbar integrating the snippet you have provided.

    <!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>