粘滞的页脚，在网站底部延伸并进一步滚动 [英] Sticky footer that extends when at website-bottom and scrolling further

问题描述

我有一个非常好的主意让我的项目更漂亮。

我希望页脚是标准的，如下图所示：

当我再往下滚动时，页脚就会升起，是所有的东西，如Impressum和联系。

我在互联网上搜索各种解决方案，但找不到合适的东西。

我希望你能帮助我。

我的页脚代码：

HTML：

 <页脚> 
< 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; 
宽度：100％; 
 padding-top：10px; 
背景：＃F28724; 
 font-size：1.3em; 
} 
 .footer-text {
 color：＃3a3a3a; 
} 
 .footer-text>一个{
颜色：＃3a3a3a; 
 display：table; 
 text-align：center; 
 margin-right：auto; 
 margin-left：auto; 
 
  

解决方案

    
  
 z-index：99; left：0px; right：0px; bottom：0px;宽度：100％; padding-top：10px;背景：＃F28724; font-size：1.3em;}。footer-text {color：＃3a3a3a;}。footer-text>一个{颜色：＃3a3a3a;显示：表格; text-align：center; margin-right：auto; margin-left：auto;}。footerContent {height：150px;位置：固定;底部：0;宽度：100％;左：0;背景：＃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>联系...< p>< / div>  
 

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

解决方案

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

这篇关于粘滞的页脚，在网站底部延伸并进一步滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！