How do I stop the attribute "position: fixed" at a certain point? - html

Question

How do I stop the attribute "position: fixed" at a certain point so the button in my case, isn't kind of following the user when scrolling anymore. Because I have this footer at the bottom of my page and the "book now" button overlaps the footer and I don't want that. How do I "stop" the button just above the footer?
const slideshowImages = document.querySelectorAll('#slideshow img');
let currentIndex = 0;
function showNextImage() {
console.log(slideshowImages[currentIndex]);
slideshowImages[currentIndex].style.display = 'none';
currentIndex = (currentIndex + 1) % slideshowImages.length;
slideshowImages[currentIndex].style.display = 'block';
}
console.log(slideshowImages);
setInterval(showNextImage, 5000);
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow: scroll;
}
h1 {
text-align: center;
font-size: 3.5em;
}
h2 {
text-align: center;
font-size: 2em;
padding-top: 2%;
}
p {
margin: 20px 0;
line-height: 1.5;
}
ul {
list-style: none;
margin: 20px 0;
padding: 0;
}
header {
overflow: hidden;
position: relative;
}
li {
margin: 10px 0;
}
.content {
position: relative;
padding: 20px 1px;
padding-left: 2.5%;
}
img {
width: 90vw;
margin-left: auto;
margin-right: auto;
display: block;
vertical-align: top;
}
#slideshow {
position: absolute;
top: 55%;
left: 12%;
width: 300px;
height: 300 px;
}
#slideshow img {
width: 170%;
height: 170%;
object-fit: cover;
}
#menu {
position: fixed;
width: 100%;
background-color: #333;
color: #fff;
z-index: 2;
padding: 0;
}
.menu-button {
font-family: Arial;
}
#menu ul {
display: flex;
margin: 0;
padding: 0;
}
#menu li {
flex: 1;
text-align: center;
}
#menu a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
}
#menu a:hover {
background-color: #444;
}
.Infotext {
position: absolute;
top: 57%;
left: 40%;
font-size: 1.5em;
}
.InfotextÜ {
position: absolute;
top: 53.5%;
left: 40%;
font-family: Arno Pro Caption;
font-size: 2.0em;
}
.button-24 {
position: fixed;
top: 90%;
left: 45.3%;
background: #FF4742;
border: 1px solid #FF4742;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: nunito, roboto, proxima-nova, "proxima nova", sans-serif;
font-size: 16px;
font-weight: 800;
line-height: 16px;
min-height: 40px;
outline: 0;
padding: 12px 43px;
text-align: center;
text-rendering: geometricprecision;
text-transform: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
}
.button-24:hover,
.button-24:active {
background-color: initial;
background-position: 0 0;
color: #FF4742;
}
.button-24:active {
opacity: .5;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
<div id="menu">
<ul>
<li>Home</li>
<li>Bildgalerie</li>
<li>Kontakt</li>
<li>In der Nähe</li>
</ul>
</div>
<header>
<div id="slideshow">
<img src="https://i.imgur.com/dXTFKBo.jpg" alt="Slideshow image 1" style="display: block">
<img src="https://i.imgur.com/FzwZzYw.jpg" alt="Slideshow image 2" style="display: none">
<img src="https://i.imgur.com/kIS6CTy.jpg" alt="Slideshow image 3" style="display: none">
<img src="https://i.imgur.com/UUr5jSJ.jpg" alt="Slideshow image 3" style="display: none">
</div>
<p class="InfotextÜ">Paradiso Piccolo</p>
<p class="Infotext">Das Paradiso Piccolo ist eine Ferienwohnung am See.</p>
<img id="image" src="https://i.imgur.com/O0jKPtk.jpg" alt="Foto">
</header>
<div class="content">
<h1>Das Apartment</h1>
<p>Das Apartment ist für bis zu 6 Personen geignet.<br> Im Apartment gibt es außerdem:</p>
<li>TV</li>
<li>Stereo-Anlage</li>
<li>WLAN (auf Wunsch)</li>
<li>Bücher</li>
<li>Brettspiele</li>
<li>Decken- und tragbare Ventilatoren</li>
<li>Infrarotheizung (gegen Aufpreis)</li>
<li>Kühlschrank</li>
<li>Mikrowelle</li>
<li>Geschirr und Besteck</li>
<li>Grundausstattung zum Kochen (Töpfe, Pfannen, Öl, Salz, Pfeffer)</li>
<li>Gefrierschrank</li>
<li>Herd (Gas und Elektro)</li>
<li>Bügeleisen</li>
<li>Geschirrspülmaschine</li>
<li>Waschmaschine</li>
<li>Wasserkocher</li>
<li>Nespresso-Maschine</li>
<li>Toaster</li>
<li>Grill</li>
<li>Holzkohle</li>
<li>Grillbesteck</li>
<li>Föhn</li>
<li>Shampoo, Duschgel, Seife, etc</li>
<li>Gartenmöbel (Liege, etc)</li>
<li>Kostenlose Parkplätze</li>
Bettwäsche und Handtücher sind selbst mitzunehmen!
<h1>Standort</h1>
<p>Via Cristoforo Colombo, 4, 37010 Brenzone VR, Italien</p>
<iframe src="..."></iframe>
<a href="https://www.airbnb.com/h/paradisopiccolo">
<button class="button-24" role="button">Book Now!</button>
</a>
</div>
<footer>
<p>Paradiso Piccolo</p>
<p>123 Main Street</p>
<p>Anytown, USA</p>
<button onclick="location.href='C:/Users/Charlie/Desktop/Impressum.html'">Impressum</button>
<button onclick="location.href='C:/Users/Charlie/Desktop/Datenschutz.html'">Datenschutz</button>
</footer>