ncrouch25 ncrouch25 - 6 months ago 21
jQuery Question

How to cover a sticky footer with another element?

I have a footer that is stuck to the bottom (it stays at the bottom with long pages and short pages.) Here is the css for it

.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: white;


}


I want to create a 'reveal' or curtain effect similar to what is on this website... dartlang.org. (scroll to the bottom obviously). I have tried doing this with a fixed footer but i can't seem to get it to work.

I'm using rails and rendering the footer with this code in my application.html.erb file

<%= render 'shared/footer' unless @disable_footer %>




for some reason the jquery reveal footer doesn't want to work with this setup either

EDIT:
here is the code for my footer... its kind of sloppy, sorry.

<footer class="footer" id="#myfooter">
<body>
<div style="background-color: white;">
<hr style="width: 100%;">

<div class="container">

<div class="row">
<div class="container-fluid">
<div class="col-md-6">
<h4>Consulting and Development</h4>
<ul style="font-weight: bold;">


<li><%= link_to "Training and Coaching", training_coaching_path%></li>
<li> <%= link_to "Business Development", business_development_path%></li>
<li> <%= link_to "Automotive Consulting", automotive_consulting_path%></li>
<li> <%= link_to "Environmental Consulting", environmental_safety_path%></li>

</ul>
</div>

<div class="col-md-6">
<h4>Quality Product Assurance</h4>
<ul style="font-weight: bold;">
<li><%= link_to "Product Inspection and Quality Resolution", containment_and_quality_path%></li>
<li><%= link_to "Auditing", auditing_path%></li>
</ul>
</div>

</div>
</div>


<hr>

<div class="row">
<div class="col-md-4">
<h4 style="text-decoration: underline;">Corporate Office Location:</h4>
<p>1</p>
<p></p>
</div>

<div class="col-md-4">
<h4 style="text-decoration: underline;">Mailing Address:</h4>
<p></p>
<p></p>
</div>


<div class="col-md-4" style="text-align: center">
<p>
<a href="mailto:hr"><i class="fa fa-envelope-o fa-2x" aria-hidden="false"></i></a>
<a href="https://www.linkedin.com/company/"><i class="fa fa-linkedin fa-2x" aria-hidden="false"></i></a>
<a href="https://www.facebook.com/"><i class="fa fa-facebook-square fa-2x" aria-hidden="false"></i></a>
</p>
</div>

</div>

<div class="row">
<div class="col-md-12">
<p class="text-muted" style="text-align: center;"> - Copyright 2016 - All Rights Reserved</p>
<p class="text-muted" style="text-align: center;"> Homepage background image was <a href="http://www.freepik.com/free-vector/gear-icons-collection_792514.htm">Designed by Freepik</a></p>
</div>



</div>


</div>
</div>
</body>
</footer>



Answer

Just make a footer with a position: fixed and with a lower z-index than the main content. Make sure your main-content has the same margin-bottom value than the footer's height in order to see it.

    html,
    body {
      margin: 0;
      padding: 0;
    }
    .main-content {
      background-color: #333333;
      width: 100%;
      height: 800px;
      margin-bottom: 300px;
    }
    .footer {
      background-color: #0072C6;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 300px;
      z-index: -1;
    }
    .footer p {
      color: #000000;
    }
<div class="main-content">
</div>
<div class="footer">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero.</p>
</div>