Уже есть очень много очень хороших примеров на 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>
Надеюсь, это поможет вашему сценарию.