Sticky footer behind main content, visible on scroll
Question
I would like to re-create this revealing sticky-footer effect found at http://www.akc.org/dog-breeds/
- I know the footer has to be fixed.
- I know the content needs to have a higher
z-index - I'm guessing (sort of) that the body needs to have a
margin-bottomwhich 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>
1 answers
solution1
6 ACCPTED 2016-07-20 00:09:50
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.