我正在我的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固定高度
我不明白这里的问题是什么。希望你能帮忙。谢谢你,谢谢
1条答案
按热度按时间o2g1uqev1#
实际上,类
sticky-top
工作得很好。问题是你用错了地方。看,下面的代码...
字符串
现在你明白了实际上,当你滚动时,你的
playbook-sidebar
类div被粘在upper
div的顶部。但是upper
div仍然可以随滚动自由移动。因此,只需将
sticky-top
类添加到upper
div中,并将其从playbook-sidebar
类div中删除。通过这样做,您的playback-sidebar
div将在向上滚动时粘在顶部。结果会如你所愿……见下文..
型