如何在Bootstrap 5.2中设置侧边栏`sticky`

我正在我的Laravel 8 / Bootstrap 5.2中开发一个粘性侧边栏。侧边栏没有使用Bootstrap类sticky-top获取sticky。我已经尝试过使用CSS，但它不起作用。下面是代码：

<div class="col-xl-3">
    <div class="playbook-sidebar sticky-top">
        <div class="head text-center text-white">
            <h5>Aritae Program Modules</h5>
        </div>
        <ul class="list-group rounded-0">
            <a href="#" class="list-group-item">
                <img src="{{ asset('assets/icons/discovery.svg') }}" alt="icon"> Discovery
            </a>
            <a href="#" class="list-group-item">
                <img src="{{ asset('assets/icons/action.svg') }}" alt="icon"> Focus
            </a>
            <a href="#" class="list-group-item">
                <img src="{{ asset('assets/icons/focus.svg') }}" alt="icon"> Action
            </a>
            <a href="#" class="list-group-item">
                <img src="{{ asset('assets/icons/strategy.svg') }}" alt="icon"> Strategy
            </a>
            <a href="#" class="list-group-item">
                <img src="{{ asset('assets/icons/personal-plan.svg') }}" alt="icon"> Personal Plan
            </a>
        </ul>
    </div>
</div>

字符串
我已经尝试过的一些解决方案：

确保没有控制台错误
设置.col-xl-3固定高度

我不明白这里的问题是什么。希望你能帮忙。谢谢你，谢谢

实际上，类sticky-top工作得很好。问题是你用错了地方。
看，下面的代码...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<style>
    .upper{
        border: solid 1px ;
    }
</style>
    <title>Document</title>
</head>
<body>
    <div class="col-xl-3 upper ">
    <div class="playbook-sidebar sticky-top">
        <div class="head text-center text-dark">
            <h5>Aritae Program Modules</h5>
        </div>
        <ul class="list-group rounded-0">
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Discovery
            </a>
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Focus
            </a>
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Action
            </a>
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Strategy
            </a>
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Personal Plan
            </a>
        </ul>
    </div>
</div>
   

<h1>scroll to see the behaviour</h1>

<div style="height: 1000px;"></div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

</body>
</html>

字符串
现在你明白了实际上，当你滚动时，你的playbook-sidebar类div被粘在upper div的顶部。但是upper div仍然可以随滚动自由移动。
因此，只需将sticky-top类添加到upper div中，并将其从playbook-sidebar类div中删除。通过这样做，您的playback-sidebar div将在向上滚动时粘在顶部。
结果会如你所愿……见下文..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<style>
    .upper{
        border: solid 1px ;
    }
   
</style>
    <title>Document</title>
</head>
<body>
    <div class="col-xl-3 upper sticky-top">
    <div class="playbook-sidebar">
        <div class="head text-center text-dark">
            <h5>Aritae Program Modules</h5>
        </div>
        <ul class="list-group rounded-0">
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Discovery
            </a>
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Focus
            </a>
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Action
            </a>
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Strategy
            </a>
            <a href="#" class="list-group-item">
                <img src="" alt="icon"> Personal Plan
            </a>
        </ul>
    </div>
</div>

<h1>scroll to see the behaviour</h1>

<div style="height: 1000px;"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

</body>
</html>

型

如何在Bootstrap 5.2中设置侧边栏`sticky`

1条答案

相关问题

热门标签

最新问答