在网站底部并进一步滚动时扩展的粘性页脚

Question

我有一个非常好的想法，可以让我的项目更漂亮。
我希望页脚是标准的，如下图所示：

当我现在进一步向下滚动时，页脚向上并在下面显示所有内容，例如“Impressum”和“Contact”。
我在互联网上搜索了各种解决方案，但找不到合适的解决方案。
我希望你能帮助我。

我的页脚代码：

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 1

将绝对位置分配给页脚和底部：0；

Answer 2

你可以试试这个使用 CSS 的 calc 函数的解决方案（阅读更多：http://www.w3schools.com/cssref/func_calc.asp），但是，据报道这不支持 IE8，我相信 Chrome 会运行良好

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;
}

演示：https://jsfiddle.net/89ucrec5/4/

Answer 3

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