Липкая колонка при прокрутке с использованием bootstrap исчезает за прокручиваемой панелью навигации - PullRequest
Новая
       26

Липкая колонка при прокрутке с использованием bootstrap исчезает за прокручиваемой панелью навигации

0 голосов
/ 02 апреля 2020

Я пытаюсь сделать прокрутку левой колонки, используя 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>

1 Ответ

0 голосов
/ 02 апреля 2020

Недостаточно кода для воспроизведения проблемы.

Полагаю, вы не учли высоту панели навигации. Ниже приведена демонстрация фиксированной боковой панели и навигационной панели, объединяющая предоставленный вами фрагмент. 

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