I have a website built with Bootstrap and I am looking to implement a "below the flow" positioning for the footer, preferably using CSS. I have been referring to it as "below the fold," although I'm not sure if that is the correct terminology to use.
My goal is to have the top of the footer initially visible at the bottom of the page, giving users a hint about the existence of the footer. As the user scrolls down, the full footer will be revealed.
It is important that this functionality works on mobile devices as well.
I have searched online but have not found a solution, possibly because I am using the wrong term.
Below is a wireframe illustrating what I am trying to achieve:
Here is a code snippet that is close to what I want, but it does not display a preview of the footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Below the Fold</title>
<link href="https://cdn.example.com/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.example.com/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.example.com/font/bootstrap-icons.css">
</head>
<body>
<main>
<section>
<div class="container">
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div class="text-center">
<form action="/search">
<div class="row mt-10 gx-0">
<div class="col pe-0">
<div class="form-group">
<label class="visually-hidden" for="categories">Categories:</label>
<select class="form-select" id="categories">
<option selected>Category 1</option>
<option disabled>Category 2 - coming soon</option>
<option disabled>Category 3 - coming soon</option>
</select>
</div>
</div>
<div class="col-12 col-sm-7 col-md-8 col-lg-9 ps-0">
<div class="input-group input-group-merge">
<input
id="query"
name="cards[query]"
type="text"
autocorrect="off"
autocapitalize="off"
autocomplete="false"
spellcheck="false"
required="true"
maxlength="512"
aria-label="Search"
placeholder="Search here ...."
class="form-control"
/>
<div class="input-group-append">
<button class="btn btn-outline-border text-body" type="submit" title="Search">
<i class="bi bi-search"></i>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer style="background-color: black">
<div class="container">
<div>
Bla
</div>
<div>
Bla
</div>
<div>
Bla
</div>
<div>
Bla
</div>
</div>
</footer>
</main>
</body>
</html>