Make 'absolute' positioned elements behave as if they were fixed - html

Question

I'm attempting to familiarise myself with Bootstrap in order to build a responsive website for an assignment, and have based my design off of this template.
I have replaced the main body of content with a landing screen for my website that involves a carousel (complete with captions) for the background image, as well as the website's logo in the centre of the page. Aside from the text upon it, the navbar remains unchanged.
Everything on the page is wrapped inside a wrapper div, which contains a sidebar nav for the sidebar, and a content div for the rest of the page content. Inside the content div is the bg div (contains the carousel, including its indicators and captions), hdr div (containing the toggle sidebar button as seen in the demo), and the body div (containing the logo).
Ideally, I would like everything within the content div to behave as if it were 'fixed'. I want the logo, background, carousel indicators, captions, etc. to remain in the viewport when the webpage is scrolled. However, I cannot set the position to 'fixed' as it breaks the navbar.
For now, I also have my bg div set to position 'absolute' so that the carousel captions/indicators remain in the centre of the page when the navbar is expanded or collapsed. So not only do my elements not remain fixed as I would like them, there is also tons of whitespace at the bottom of the page when the web page is viewed at lower resolutions.
Below is the code for my website.
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
img {
display: block;
max-width: 100%;
height: auto;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i, span {
display: inline-block;
}
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.carousel-caption h3 {
font-size: 2.5vw;
}
.carousel-caption p {
font-size: 1.5vw;
}
.carousel-indicators {
position: absolute;
margin-right: auto;
margin-left: auto;
}
.carousel-caption {
position: absolute;
margin-right: auto;
margin-left: auto;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\f078';
display: block;
position: absolute;
right: 20px;
font-family: FontAwesome;
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\f077';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article, a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 0;
min-height: 100vh;
transition: all 0.3s;
position: relative;
width: auto;
height: auto;
}
#hdr {
position: relative;
z-index: 100;
padding: 20px;
}
#bg {
position: fixed;
top: 0;
left: 0;
z-index: -100;
width: 100%;
height: 100%;
}
#body {
height: 84%;
}
#logo {
position: relative;
width: 30%;
height: 30%;
top: 5%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important ;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3, #sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel=stylesheet type=text/css href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Website</h3>
<strong>W</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fas fa-newspaper"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-link"></i>
Portfolio
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paperclip"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-at"></i>
Contact
</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content" class="container-fluid" style="width:100%;overflow:hidden;">
<div id="bg" style="width:100% !important;position:absolute;">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('https://www.publicdomainpictures.net/pictures/170000/velka/red-purple-pattern-background.jpg');">
<div class="carousel-caption">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://www.publicdomainpictures.net/pictures/140000/velka/cool-calm-green-water-background.jpg');">
<div class="carousel-caption">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://www.publicdomainpictures.net/pictures/170000/velka/blue-brush-strokes-background.jpg');">
<div class="carousel-caption">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
<div id="hdr">
<nav class="navbar navbar-default" style="background-color:rgba(0,0,0,0);">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</div>
</nav>
</div>
<div id="body" class="container-fluid">
<img id="logo" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
What can I do?