How to keep footer from pushing up sticky sidebar

Question

I have a sidebar navigation that was working well until I added in my footer. Now, as I scroll down, when my footer appears it pushes the sticky sidebar up, and the headings in my sidebar disappear behind the header.

I'm wondering how to keep the sidebar sticky, even when an element below it is pushing up on it (ie. have it stay right where it is even when scrolling down to the footer).

One thought I had was to use z-index to make the footer pass in front of the sidebar rather than push it up, but nothing I have tried before has worked on that count.

I have done a lot of reading about sticky sidebars and footers and found some great models, such as https://codepen.io/hexagoncircle/pen/oNLZmvV and https://codepen.io/C2P0/full/EaPBWe but in all the cases I have come across, it seems that people want the sidebar to stop being sticky once you get to the footer.

Here is a working version of what I have so far: https://sites.ualberta.ca/~pneilson/LIS534/Test1/selectingbeans.html

Here is my HTML and CSS for this part of the site:

/* sidebar styling */
aside {
  height: calc(100vh - 4em);
  width: 15em;
  position: sticky;
  z-index: 0.5;
  top: 4em;
  left: 0;
  background-color: lightblue;
  overflow-x: hidden;
  float: left;
}
aside a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.25em;
  color: black;
  display: block;
}
#subitem a {
  padding: 6px 8px 6px 32px;
  text-decoration: none;
  font-size: 1em;
  color: black;
  display: block;
}
aside a:hover:not(.current-menu-item) {
  background-color: #e6bbad; 
  font-weight: bold;
}
.current-menu-item {
  background-color: white; 
  font-weight: 900;
}

/* main content styling */
.content {
  padding: 0em 0em 0em 1em;
  overflow: hidden;
  position: relative;
  top: 0;
}
a.anchor {
  display: block;
  position: relative;
  top: -75px;
  visibility: hidden;
}

/* footer styling */
footer {
  background-color: #4d6167;
  margin-top: -1.1em;
  margin-bottom: -1.1em;
}
footer p {
  color: white;
}

<section>

<aside> <!--this is the sidebar element-->
  <a class="menu-item-1" href="#target1">Coffee Varieties</a>
  <a class="menu-item-2" href="#target2">Growing Regions</a>
  <a class="menu-item-3" href="#target3">Processing Methods</a>
  <a class="menu-item-4" href="#target4">Production Practices</a>
</aside>

<div class="content">

<h2>Selecting Beans</h2>
<p style="text-indent: 1em;">If you are just getting started with coffee roasting, you may wonder what type of green
coffee beans to begin with.  This guide will provide a brief introduction to green coffee
to help you find the perfect beans.</p>

<a class="anchor" id="target1"></a>
<h3>Coffee Varieties</h3>
<p>Text</p>
<h4>Arabica</h4>
<p class="inset">Text</p>
<h4>Robusta</h4>
<p class="inset">Text</p>
<p>&nbsp</p>

<a class="anchor" id="target2"></a>
<h3>Growing Regions</h3>
<p>Text</p>
<h4>Central & South America</h4>
<p class="inset">Text</p>
<h4>East Africa & the Arabian Peninsula</h4>
<p class="inset">Text</p>
<h4>Southeast Asia & the Pacific</h4>
<p class="inset">Text</p>
<p>&nbsp</p>

<a class="anchor" id="target3"></a>
<h3>Processing Methods</h3>
<p>Text</p>
<h4>Natural-Dry Process</h4>
<p class="inset">Text</p>
<h4>Washed-Wet Process</h4>
<p class="inset">Text</p>
<h4>Honey-Pulped Natural Process</h4>
<p class="inset">Text</p>
<h4>Other Methods</h4>
<p class="inset">Text</p>
<p>&nbsp</p>

<a class="anchor" id="target4"></a>
<h3>Production Practices</h3>
<p>Text</p>
<h4>Rainforest Alliance Certified</h4>
<p class="inset">Text</p>
<h4>Shade Grown</h4>
<p class="inset">Text</p>
<h4>Organic</h4>
<p class="inset">Text</p>
<p>&nbsp</p>
<p>&nbsp</p>

</div>

</section>

<footer>
<p>Last updated March 31, 2021</p>
<p>This website was made for a project in LIS 534.</p>
</footer>

Thanks in advance for your help. You can probably tell from my code that I'm new at this.

Answer 1

Move your footer from outside the section area into it and your navbar will keep being sticky to the bottom of the page.

/* sidebar styling */
aside {
  height: calc(100vh - 4em);
  width: 15em;
  position: sticky;
  z-index: 0.5;
  top: 4em;
  left: 0;
  background-color: lightblue;
  overflow-x: hidden;
  float: left;
}
aside a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.25em;
  color: black;
  display: block;
}
#subitem a {
  padding: 6px 8px 6px 32px;
  text-decoration: none;
  font-size: 1em;
  color: black;
  display: block;
}
aside a:hover:not(.current-menu-item) {
  background-color: #e6bbad; 
  font-weight: bold;
}
.current-menu-item {
  background-color: white; 
  font-weight: 900;
}

/* main content styling */
.content {
  padding: 0em 0em 0em 1em;
  overflow: hidden;
  position: relative;
  top: 0;
}
a.anchor {
  display: block;
  position: relative;
  top: -75px;
  visibility: hidden;
}

/* footer styling */
footer {
  background-color: #4d6167;
  margin-top: -1.1em;
  margin-bottom: -1.1em;
}
footer p {
  color: white;
}

<section>

<aside> <!--this is the sidebar element-->
  <a class="menu-item-1" href="#target1">Coffee Varieties</a>
  <a class="menu-item-2" href="#target2">Growing Regions</a>
  <a class="menu-item-3" href="#target3">Processing Methods</a>
  <a class="menu-item-4" href="#target4">Production Practices</a>
</aside>

<div class="content">

<h2>Selecting Beans</h2>
<p style="text-indent: 1em;">If you are just getting started with coffee roasting, you may wonder what type of green
coffee beans to begin with.  This guide will provide a brief introduction to green coffee
to help you find the perfect beans.</p>

<a class="anchor" id="target1"></a>
<h3>Coffee Varieties</h3>
<p>Text</p>
<h4>Arabica</h4>
<p class="inset">Text</p>
<h4>Robusta</h4>
<p class="inset">Text</p>
<p>&nbsp</p>

<a class="anchor" id="target2"></a>
<h3>Growing Regions</h3>
<p>Text</p>
<h4>Central & South America</h4>
<p class="inset">Text</p>
<h4>East Africa & the Arabian Peninsula</h4>
<p class="inset">Text</p>
<h4>Southeast Asia & the Pacific</h4>
<p class="inset">Text</p>
<p>&nbsp</p>

<a class="anchor" id="target3"></a>
<h3>Processing Methods</h3>
<p>Text</p>
<h4>Natural-Dry Process</h4>
<p class="inset">Text</p>
<h4>Washed-Wet Process</h4>
<p class="inset">Text</p>
<h4>Honey-Pulped Natural Process</h4>
<p class="inset">Text</p>
<h4>Other Methods</h4>
<p class="inset">Text</p>
<p>&nbsp</p>

<a class="anchor" id="target4"></a>
<h3>Production Practices</h3>
<p>Text</p>
<h4>Rainforest Alliance Certified</h4>
<p class="inset">Text</p>
<h4>Shade Grown</h4>
<p class="inset">Text</p>
<h4>Organic</h4>
<p class="inset">Text</p>
<p>&nbsp</p>
<p>&nbsp</p>

</div>
<footer>
<p>Last updated March 31, 2021</p>
<p>This website was made for a project in LIS 534.</p>
</footer>
</section>