Почему bootstrap 5 position-sticky не работает?

Я использую Bootstrap 5, пытаясь сделать адаптивную карточную рекламу. левая карта. По какой-то причине липкий верх не работает.

Я пытаюсь создать липкую боковую панель слева. Меню боковой панели находится внутри столбца сетки. Я использую класс sticky-top, как показано в этом вопросе, но он все еще не работает.

Вот мой код: Вот мой код; Я не знаю о каких-либо возможных столкновениях с sticky-top.

<!Docktype html>
<html dir = "ltr">
<head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
    <title>Selda</title>
</head>
<body class = "bg-light d-flex flex-column min-vh-100" data-new-gr-c-s-check-loaded = "8.904.0" data-gr-ext-installed = "">
<nav class = "navbar navbar-expand-lg bg-body-tertiary">
    <div class = "container">
        <a class = "navbar-brand" href = "#">Selda</a>
        <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
            <span class = "navbar-toggler-icon"></span>
        </button>
        <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
            <ul class = "navbar-nav me-auto mb-2 mb-lg-0">
                <li class = "nav-item">
                    <a class = "nav-link" href = "">Home</a>
                </li>    
                <li class = "nav-item">
                    <a class = "nav-link" href = "">Products</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "">Counselings</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Learning</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "">About-US</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "">Contact-US</a>
                </li>
            </ul>
            <ul class = "navbar-nav mb-2 mb-lg-0">
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Login</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Register</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class = "container min-vh-100">
    <div class = "row">
        <div class = "col-lg-8 mb-3">
            <div class = "card">
                <div class = "card-header" style = "height: 90px"></div>
                <div class = "card-body">
                    <div class = "d-block d-md-flex mb-3">
                        <div style = "width:115px; margin-top:-75px">
                            <img src = "https://i.stack.imgur.com/vRDsY.png" class = "rounded-circle img-thumbnail">
                            <div class = "text-center">
                                <span class = "badge bg-success">Online</span>
                            </div>
                        </div>
                        <h1 class = "h5">
                            <i class = "fa-solid fa-circle-check text-success"></i>
                            John Sina
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class = "col-lg-4 mb-3">
            <div class = "menu sticky-top">
                <div class = "card">
                    <div class = "card-body">
                        <h6 class = "card-title">Plan</h6>
                    </div>
                    <ul class = "list-group">
                        <li class = "list-group-item p-0 align-items-center">
                            <a class = "d-flex justify-content-between list-group-item list-group-item-action border-0" href = "#">
                                <div>
                                    <i class = "fa-solid fa-file-pdf"></i>
                                    <span>Download PDF</span>
                                </div>
                                <span class = "badge bg-primary rounded-pill">Free</span>
                            </a>
                        </li>
                        <li class = "list-group-item p-0 align-items-center">
                            <a class = "d-flex justify-content-between list-group-item list-group-item-action border-0" href = "#">
                                <div>
                                    <i class = "fa-solid fa-photo-film"></i>
                                    <span>Download Video</span>
                                </div>
                                <span class = "badge bg-primary rounded-pill">85,000 $</span>
                            </a>
                        </li>
                        <li class = "list-group-item p-0 align-items-center">
                            <a class = "d-flex justify-content-between list-group-item list-group-item-action border-0" href = "#">
                                <div>
                                    <i class = "fa-solid fa-book"></i>
                                    <span>Download Word</span>
                                </div>
                                <span class = "badge bg-primary rounded-pill">Free</span>
                            </a>
                        </li>
                    </ul>
                    <div class = "card-body">
                        <button class = "btn btn-success btn-lg w-100">Payment</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class = "row">
        <div class = "col-lg-4 mb-3">
            <div class = "card">
                <div class = "card-body">
                    <h6 class = "card-title">About me</h6>
                    <p>Text</p>
                </div>
            </div>
        </div>
        <div class = "col-lg-4 mb-3">
            <div class = "card">
                <div class = "card-body">
                    <h6 class = "card-title">My Video</h6>
                    <video poster = "https://i.stack.imgur.com/vRDsY.png" controls = "" class = "w-100" __idm_id__ = "1286145">
                        <source src = "http://localhost:8000/storage/videos/counselings/1674029169.mp4" type = "video/mp4">
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js  "></script>
</body>
</html>

Раздел menu — это тот, который я хотел бы придерживаться вверху, когда пользователь прокручивает страницу вниз.

Вы написали DOCTYPE неправильно. Если это не было частью проблемы, это могло вызвать другие проблемы, которые вы еще не заметили, поскольку это могло привести вас в режим причуд.

— 20.01.2023 15:26

html bootstrap-5

20.01.2023 11:24

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Похоже, проблема в том, что класс sticky-top не применяется к правильному элементу. В вашем коде он применяется к элементу панели навигации, но его следует применять к столбцу боковой панели, который вы хотите сделать закрепленным.

Попробуйте добавить класс sticky-top в элемент col-lg-4, содержащий боковое меню, например:

<div class = "col-lg-4 mb-3 sticky-top">

Также убедитесь, что родительский элемент этого столбца боковой панели имеет свойство position, установленное на относительный, чтобы прикрепляемый элемент можно было позиционировать относительно него.

<div class = "row" style = "position:relative">

Вы также можете добавить свойство top к липкому элементу для лучшего позиционирования.

<div class = "col-lg-4 mb-3 sticky-top" style = "top:50px">

Это должно сделать боковое меню липким слева, когда вы прокручиваете страницу вниз.

Я добавил ваши коды в свой проект, но моя проблема еще не решена.

— 20.01.2023 11:37

вы должны отправить ошибку или снимок экрана, чтобы увидеть, в чем проблема

— 20.01.2023 11:43

добавьте эту строку <div class = "col-lg-4 mb-3" style = "height:500px; overflow:scroll;"> В вашем коде родительским элементом для боковой панели является div "col-lg-4" , который не имеет заданной высоты. Возможно, это приводит к тому, что класс sticky-top не работает должным образом. Чтобы решить эту проблему, вы можете попробовать установить высоту для div "col-lg-4" или добавить к нему "overflow:scroll".

— 20.01.2023 11:50

i.stack.imgur.com/6TQzr.png Добавил ваши коды, в свой проект, но моя проблема так и не решилась.

— 20.01.2023 12:09

20.01.2023 11:28

Ответ принят как подходящий

Проблема в том, что элементы привязаны только к своему родительскому элементу, поэтому меню остается внутри столбца. Вы должны разделить свою страницу на два больших столбца: один для всех остальных строк/столбцов, а другой – для боковой панели, которая останется наверху. Попробуйте это (хотя вам, возможно, придется изменить некоторые отступы/поля из-за вложенных строк):

<div class = "container min-vh-100">
    <div class = "row">
        <div class = "col-lg-8 mb-3">
            <div class = "row">
                <div class = "col-12"></div>
                    <div class = "card">
                        <div class = "card-header" style = "height: 90px"></div>
                        <div class = "card-body">
                            <div class = "d-block d-md-flex mb-3">
                                <div style = "width:115px; margin-top:-75px">
                                    <img src = "https://i.stack.imgur.com/vRDsY.png" class = "rounded-circle img-thumbnail">
                                    <div class = "text-center">
                                        <span class = "badge bg-success">Online</span>
                                    </div>
                                </div>
                                <h1 class = "h5">
                                    <i class = "fa-solid fa-circle-check text-success"></i>
                                    John Sina
                                </h1>
                            </div>
                        </div>
                    </div>
            </div>
            <div class = "row">
                <div class = "col-6">
                    <div class = "card">
                        <div class = "card-body">
                            <h6 class = "card-title">About me</h6>
                            <p>Text</p>
                        </div>
                    </div>
                </div>
                <div class = "col-6">
                    <div class = "card">
                        <div class = "card-body">
                            <h6 class = "card-title">My Video</h6>
                            <video poster = "https://i.stack.imgur.com/vRDsY.png" controls = "" class = "w-100" __idm_id__ = "1286145">
                                <source src = "http://localhost:8000/storage/videos/counselings/1674029169.mp4" type = "video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class = "col-lg-4 mb-3">
            <div class = "menu sticky-top">
                <div class = "card">
                    <div class = "card-body">
                        <h6 class = "card-title">Plan</h6>
                    </div>
                    <ul class = "list-group">
                        <li class = "list-group-item p-0 align-items-center">
                            <a class = "d-flex justify-content-between list-group-item list-group-item-action border-0" href = "#">
                                <div>
                                    <i class = "fa-solid fa-file-pdf"></i>
                                    <span>Download PDF</span>
                                </div>
                                <span class = "badge bg-primary rounded-pill">Free</span>
                            </a>
                        </li>
                        <li class = "list-group-item p-0 align-items-center">
                            <a class = "d-flex justify-content-between list-group-item list-group-item-action border-0" href = "#">
                                <div>
                                    <i class = "fa-solid fa-photo-film"></i>
                                    <span>Download Video</span>
                                </div>
                                <span class = "badge bg-primary rounded-pill">85,000 $</span>
                            </a>
                        </li>
                        <li class = "list-group-item p-0 align-items-center">
                            <a class = "d-flex justify-content-between list-group-item list-group-item-action border-0" href = "#">
                                <div>
                                    <i class = "fa-solid fa-book"></i>
                                    <span>Download Word</span>
                                </div>
                                <span class = "badge bg-primary rounded-pill">Free</span>
                            </a>
                        </li>
                    </ul>
                    <div class = "card-body">
                        <button class = "btn btn-success btn-lg w-100">Payment</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Как создать липкий топ?

— 20.01.2023 12:25

<div class = "menu sticky-top"> находится в коде, который я разместил, или вы имеете в виду что-то другое?

— 20.01.2023 12:36

я имею в виду что-то другое

— 20.01.2023 12:53

20.01.2023 12:13