CODEWITHSUNDEEP
htmlcsssticky-footer
4dinand
4dinand

Reputation: 143

bootstrap 4: make sticky footer dissapear when scrolling up

I created a page, which hasn't enough content to push my footer all the way down to the bottom. So I created a .wrapper around the content and added bootstrap's .fixed-bottom class to the footer in order to have a sticky-footer attached to the bottom of my viewport.

What I want is that the sticky-footer dissapears as soon as it touches the bottom of the last content-container instead of having it above the content when I decrease my browser window.

See the Pen sticky footer by ferdinand huber (@fdhu) on CodePen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>sticky footer</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<style>
footer {background: lightgrey;}
</style>

</head>

<body>

<div class="wrapper">
  <main> 
   <section>
      <div class="container-fluid">
       <div class="row">
        <div class="col-12">
           <h1>Help!</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
         </div>
        </div>  
      </div>
    </section>
  </main>
</div> 

<!-- FOOTER -->
<div class="fixed-bottom">
  <footer class="footer">
    <div class="container-fluid">
      <nav class="navbar nav-footer navbar-expand">
      <!-- NAV-MENU -->
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <div class="nav-item">
             <a class="nav-link" href="#">about</a>
            </div>
            <div class="nav-item">
               <a class="nav-link" href="#">imprint</a>
            </div> 
          </div>
        </div>
      </nav>
    </div> 
  </footer>
</div>

</body>

</html>

Upvotes: 2

Views: 3581

Answers (1)

4dinand
4dinand

Reputation: 143

Figured out how to do this: I removed the .fixed-bottom class and the .wrapper around my content

Instead I added the following css:

html {
      position: relative;
      min-height: 100%;
}

body {
      margin-bottom: 40px; /* Margin bottom by footer height */
}

.footer {
         position: absolute;
         bottom: 0; 
         width: 100%;
         height: 40px; /* Set the fixed height of the footer here */
         line-height: 0.5; /* aligns type in footer-container */
         background-color: #f5f5f5;
}
See the Pen better sticky footer by ferdinand huber (@fdhu) on CodePen.

Upvotes: 2

Related Questions