Benjamin Pössenberger Benjamin Pössenberger - 3 months ago 19
CSS Question

Sticky footer that extends when at website-bottom and scrolling further

I had a very nice idea to make my project much prettier.

I want that the footer is standard like in the picture below:

Website Picture

And when i scroll further down now, that the footer goes up and bellow it is all the stuff like the "Impressum" and "Contact".

I searched the Internet for various solutions but couldn't find something fitting.

I hope you can help me.

Code of my footer:

HTML:

<footer>
<div class="footer">
<p class="footer-text"><a href="{{ path('homepage') }}">OneClick</a></p>
</div>
</footer>


CSS:

.footer {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
padding-top: 10px;
background: #F28724;
font-size: 1.3em;
}
.footer-text {
color: #3a3a3a;
}
.footer-text > a {
color: #3a3a3a;
display: table;
text-align: center;
margin-right: auto;
margin-left: auto;
}

Answer

$(function() {
  $(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
      $('.footerContent').slideDown(650);
    } else if ($(document).scrollTop() < 100) {
      $('.footerContent').fadeOut(500);
    }
  });
})
body,
html {
  height: 1000px;
}
.footer {
  position: fixed;
  z-index: 99;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  padding-top: 10px;
  background: #F28724;
  font-size: 1.3em;
}
.footer-text {
  color: #3a3a3a;
}
.footer-text > a {
  color: #3a3a3a;
  display: table;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
.footerContent {
  height: 150px;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background: #F28724;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="footer">
  <p class="footer-text"><a href="{{ path('homepage') }}">OneClick</a>
  </p>
</div>

<div class="footerContent">
  <p>Contact ...
    <p>
</div>

Comments