向下滚动时的AdminLTE 3固定元素
我希望固定左侧（红色框）的元素，以便在页面滚动时停留在页面顶部。 我尝试过将属性固定并具有粘性，但是它们不起作用。
预览
开始：
滚动后：
这是页面https://adminlte.io/themes/dev/AdminLTE/pages/mailbox/read-mail.html
1 个答案:
答案 0 :(得分：0)
w3schools.com上Fixed Sidebar上已经有很多很好的例子
这里使用Bootstrap 4，CSS和普通Javascript
var sideNavBarWidth = document.getElementsByClassName('side-navbar');
var innerNavBar = document.getElementsByClassName('inner-navbar');
// Giving a 1rem space from both side
innerNavBar["0"].style.minWidth = (sideNavBarWidth["0"].offsetWidth - (32)) + 'px';.list-group-item {
cursor: pointer !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bg-light">
<div class="col-12">
<div class="row">
<div class="col-3 border border-dark px-0 py-4 side-navbar">
<div class="position-fixed inner-navbar mx-3">
<ol class="list-group">
<a href="#" class="list-group-item my-1">Chapter 1</a>
<a href="#" class="list-group-item my-1">Chapter 2</a>
<a href="#" class="list-group-item my-1">Chapter 3</a>
<a href="#" class="list-group-item my-1">Chapter 4</a>
<a href="#" class="list-group-item my-1">Chapter 5</a>
</ol>
</div>
</div>
<div class="col-9 border border-dark px-4 py-4">
<div class="row mb-3 px-4 jumbotron-fluid">
<h1>Chapter 1</h1>
</div>
<div class="row mb-3 px-4 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna
aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
amet mattis vulputate
enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
scelerisque in dictum. Sit amet
massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
etiam dignissim diam quis.
Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
Eget duis at tellus at.
Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
mauris a diam maecenas
sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
pulvinar neque laoreet
suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
habitant morbi tristique
senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
</div>
<div class="row mb-3 px-4 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna
aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
amet mattis vulputate
enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
scelerisque in dictum. Sit amet
massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
etiam dignissim diam quis.
Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
Eget duis at tellus at.
Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
mauris a diam maecenas
sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
pulvinar neque laoreet
suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
habitant morbi tristique
senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
</div>
<div class="row mb-3 px-4 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna
aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
amet mattis vulputate
enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
scelerisque in dictum. Sit amet
massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
etiam dignissim diam quis.
Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
Eget duis at tellus at.
Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
mauris a diam maecenas
sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
pulvinar neque laoreet
suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
habitant morbi tristique
senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
</div>
<div class="row mb-3 px-4 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna
aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
amet mattis vulputate
enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
scelerisque in dictum. Sit amet
massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
etiam dignissim diam quis.
Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
Eget duis at tellus at.
Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
mauris a diam maecenas
sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
pulvinar neque laoreet
suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
habitant morbi tristique
senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
</div>
<div class="row mb-3 px-4 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna
aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
amet mattis vulputate
enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
scelerisque in dictum. Sit amet
massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
etiam dignissim diam quis.
Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
Eget duis at tellus at.
Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
mauris a diam maecenas
sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
pulvinar neque laoreet
suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
habitant morbi tristique
senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
</div>
<div class="row mb-3 px-4 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna
aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
amet mattis vulputate
enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
scelerisque in dictum. Sit amet
massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
etiam dignissim diam quis.
Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
Eget duis at tellus at.
Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
mauris a diam maecenas
sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
pulvinar neque laoreet
suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
habitant morbi tristique
senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
</div>
<div class="row mb-3 px-4 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna
aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
amet mattis vulputate
enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
scelerisque in dictum. Sit amet
massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
etiam dignissim diam quis.
Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
Eget duis at tellus at.
Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
mauris a diam maecenas
sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
pulvinar neque laoreet
suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
habitant morbi tristique
senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
</div>
<div class="row mb-3 px-4 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna
aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
amet mattis vulputate
enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
scelerisque in dictum. Sit amet
massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
etiam dignissim diam quis.
Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
Eget duis at tellus at.
Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
mauris a diam maecenas
sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
pulvinar neque laoreet
suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
habitant morbi tristique
senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
</div>
</div>
</div>
</div>
</div>
希望，这对您的情况有帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？