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: And when i scroll further down now, that the footer goes up

Solution 1:

$(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>

Solution 2:

You could try this solution that uses the calc function of CSS (read more: http://www.w3schools.com/cssref/func_calc.asp), however, this is reported not supporting the IE8, I believe Chrome will run it well

HTML:

<header>
  <h1>Header</h1>
</header>

<main>
  <content>
    <p>content</p>
  </content>

  <footer>
    <p>Footer</p>
  </footer>
</main>

CSS:

html,
body {
    margin:0;
    padding:0;
    min-height:100vh;
}

header {
    background: LightSlateGray;
  height: 100px;
  line-height: 100px;
    padding: 0 10px;
}
 header h1 { margin: 0; }

main { height: auto; min-height: calc(100vh - 100px); }
content, footer { display: inline-block; width: 100%; }

content { height: auto; min-height: calc(100vh - 200px); background:lightblue; }
footer {
    height:100px;           /* Height of the footer */
    background:#6cf;
}

Demo: https://jsfiddle.net/89ucrec5/4/

Solution 3:

assign absolute position to footer and bottom:0;