Login/Register
Sticky footer behind main content, visible on scroll
Asked Answered
Solved htmlcssfootersticky-footertwitter-bootstrap-4
O

1

5

I would like to re-create this revealing sticky-footer effect found at http://www.akc.org/dog-breeds/

help

  1. I know the footer has to be fixed.
  2. I know the content needs to have a higher z-index
  3. I'm guessing (sort of) that the body needs to have a margin-bottom which is equal to the height of the footer???

Please would someone help me out.

I'm using Twitter Bootstrap 4. The general markup looks like this:

<body>
    <div class="container"> <!-- This part should scroll up to reveal the footer below -->
        <!-- Content goes in here -->
    </div>
    <footer class="footer"> <!-- This should be hidden initially -->
        <div class="container">
            <div class="row">
                <!-- Footer stuff goes in here -->
            </div>
        </div>
    </footer>
</body>
Owl answered 19/7, 2016 at 23:52 Comment(3)
didn't you just answer your own question in 1, 2 and 3? – Patti
Possibly, but I've been playing around with it and haven't found what I'm after yet.. – Owl
You're right, container needs position: relative and a higher z-index, footer fixed, bottom: 0, and body has margin-bottom – Patti
C
7

You will want to add a main content div and then give this div a background color of whatever you want your page to be otherwise you will just end up having text overlapping but yes you are right you will want to give your main content div a z-index of 1 or something and then fix your footer behind that and give it a z-index smaller than that in my example I gave it a z-index of -1. Then your main content div will scroll over the top of your footer. You will probably want to give your footer a height and your body a padding-bottom of the same height.

Here is an example of how I did it Fiddle Demo:

Html:

<div class="main-content">
  <div class="container">
    <div class="row">
      Your main Content Scroll down
    </div>
  </div>
</div>
<footer>
  <div Class="container">
    <div CLass="row">
      Footer Content
    </div>
  </div>
</footer>

Css:

body{
  padding-bottom:200px;
}
.main-content{
  min-height:200vh;
  background:#fff;
  z-index:1;
}
footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
  background:#000;
  color:#fff;
  z-index:-1;
}
Calathus answered 20/7, 2016 at 0:9 Comment(2)
Thank you :) Why do I need to wrap the first container within another div? Couldn't I just style the container? – Owl
No because the container has a max-width so you will see the footer on the sides. – Calathus

© 2022 - 2024 — McMap. All rights reserved.