Make footer disappear behind body and appear when scrolling down - html

Question

I would like the footer of my website to stay behind the body until I start scrolling down or I hit the end of the page.
Means: when I start scrolling the footer should start appearing the more I scroll and if there is enough content than the footer should only appear once I get to the bottom of the page.
Here is what I did till now: https://jsfiddle.net/rq1gevb9/1/
I tried several tutorials, but I'm stuck with the footer on top and not under nor below the body.
Edit: CSS for the page
/* BODY */
body {
font-family: Consolas;
color: white;
background-color: #151515;
margin-left: 12%;
margin-right: 12%;
z-index: 2;
margin-bottom: 20px;
box-shadow: 100px -100px -100px -100px black;
}
/* HEADER */
header {
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
}
header h1 a {
color: whitesmoke;
}
header nav {
margin-top: 10px;
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
header nav ul li {
margin: 0 10px;
}
header nav ul li a {
text-decoration: none;
color: white;
}
header nav a:hover {
font-weight: 700;
text-decoration: underline;
}
/* SECTIONS GLOBALS */
section {
padding: 20px;
}
section h2 {
margin-top: 0;
}
/* SECTIONS LOCALS */
/* SECTIONS Homepage */
section#hp-projects ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section#hp-projects ul li {
margin-bottom: 10px;
}
section#hp-projects ul li a {
text-decoration: none;
color: white;
}
section#hp-projects ul li a:hover {
font-weight: 700;
text-decoration: underline;
}
/* SECTIONS About */
section#about-badges div img {
height: 30px;
}
.column {
display: inline-block;
}
/* FOOTER */
footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
text-align: center;
background-color: whitesmoke;
}

Answer 1

First fix some errors in HTML.
Footer /footer element must be inside /body closing tag
/body must be just before /html.
Then wrap all the content inside a div (class .container) excluding /footer /footer.
Write some CSS to syle the background color, width all the viewport and margin left to puti at the beginning of the screen. Give it a margin bottom space to reveal the footer behind after scrolling.
.container {
background-color: #000;
width: 100vw;
margin-left: calc(-1*(50vw - 50%));
margin-bottom: 150px;
}
Here the full HTML code
<div class="container">
<header>
<h1 style="display: inline-block;">Projet NSI - Site Web</h1>
<nav>
<ul>
<li>About</li>
<li>Projects</li>
</ul>
</nav>
</header>
<section id="hp-about">
<h2>About Me</h2>
<p>I am a web developer with no experience in HTML, CSS, and JavaScript. I am passionate about creating user-friendly and visually appealing websites.</p>
</section>
<section id="hp-projects">
<h2>My Projects</h2>
<ul>
<li>Project 1</li>
<li>Project 2</li>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<li>Project 3</li>
</ul>
</section>
</div>
<!-- container closed - footer excluded -->
<footer>
Footer!
<br />
Hi
<br />
Hi
<br />
Hi
<br />
Hi
<br />
Hi
<br />
Hi
<br />
Hi
</footer>
Here the full CSS code
/* BODY */
body {
font-family: Consolas;
color: white;
background-color: #151515;
margin-left: 12%;
margin-right: 12%;
z-index: 2;
margin-bottom: 20px;
box-shadow: 100px -100px -100px -100px black;
}
.container {
background-color: #000;
width: 100vw;
margin-left: calc(-1*(50vw - 50%));
margin-bottom: 150px;
}
/* HEADER */
header {
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
}
header h1 a {
color: whitesmoke;
}
header nav {
margin-top: 10px;
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
header nav ul li {
margin: 0 10px;
}
header nav ul li a {
text-decoration: none;
color: white;
}
header nav a:hover {
font-weight: 700;
text-decoration: underline;
}
/* SECTIONS GLOBALS */
section {
padding: 20px;
}
section h2 {
margin-top: 0;
}
/* SECTIONS LOCALS */
/* SECTIONS Homepage */
section#hp-projects ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section#hp-projects ul li {
margin-bottom: 10px;
}
section#hp-projects ul li a {
text-decoration: none;
color: white;
}
section#hp-projects ul li a:hover {
font-weight: 700;
text-decoration: underline;
}
/* SECTIONS About */
section#about-badges div img {
height: 30px;
}
.column {
display: inline-block;
}
/* FOOTER */
footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
text-align: center;
background-color: #FFF;
color: #000;
}
Here the working codepen example
https://codepen.io/Davevvave/pen/VwBzYNa

Answer 2

You can use the min-height property to make your main content be at least the full screen height with 100vh. Here is an example:
<body>
<main>
<nav>Some Links</nav>
<section>Some Content</section>
</main>
<footer>Footer goes here</footer>
</body>
and in your styles:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
min-height: 100vh;
width: 100%;
background: blue;
}
footer {
height: 200px;
width: 100%;
background: red;
}
Herer is the example fiddle: https://jsfiddle.net/qh4c8b5m/4/