【发布时间】：2019-02-02 23:20:20
【问题描述】：
我希望修复左侧（红色框）的元素，以便在页面滚动时保持在页面顶部。 我尝试使用固定和粘性的属性，但它们不起作用。
预览
这是页面https://adminlte.io/themes/dev/AdminLTE/pages/mailbox/read-mail.html
【问题讨论】：
-
希望下面的回答对您有所帮助。
标签： css bootstrap-4 adminlte
【发布时间】：2019-02-02 23:20:20
【问题描述】：
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>希望，这会对您的方案有所帮助。
【讨论】：
-
谢谢。我想我没有很好地定义我的问题。我试图用 position: fixed 修改 css，但是在页面上滚动时，左侧的元素没有定位在页面的顶部，因为它们继续尊重导航栏和 Content Header 所在的空间（页面页眉）的模板。我试过 position: sticky 但没有成功。我修改了问题以试图更好地解释问题。