隐藏的页脚逐渐出现在滚动条上答案

【问题标题】：hidden footer gradually appears on scroll隐藏的页脚逐渐出现在滚动条上
【发布时间】：2017-09-28 08:06:36
【问题描述】：

我正在尝试在一个项目中产生这种效果

像这个页面一样，页脚被隐藏并在您滚动时出现。页面包含在 page-content 元素中，页脚固定在底部 z-indexed 0 当您到达窗口末尾时，页面内容边距会随着您滚动而上升。我真的找不到使用 j 查询的方法

【问题讨论】：

【解决方案1】：

这是一个例子，你只需将它放在页面底部或任何其他你希望它停留的地方，你可以使用 z-index=-1; 隐藏它;

//<br><br><br><br><br><br><br><br><br>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>

<br><br><br><br><br><br><br><br>

CSS

@import "compass/css3";

h2 {
  text-align: center;
  margin-top: 48px;
}

div {
  height: 200px;
  width: 50%;
  max-width: 600px;
  margin: 32px auto;
  overflow-x: hidden;
 // overflow-y: scroll;
}

.fixed {
  background: url('http://lorempixel.com/600/200/animals');
  background-attachment: fixed;
  overflow: hidden;
}

.expand {
  height: 400px;
  width: 100%;
}

https://jsfiddle.net/cu01m218/

【讨论】：

【解决方案2】：

我为你做了一个例子。

$(function(){
  
  calcFooter();
  
function calcFooter () {
  var footer = $('.footer').height();
  var mainContent = $('.main-content');
  
  mainContent.css('margin-bottom', footer);
}

$(window).resize(calcFooter);
  
});

body {
  margin: 0;
}

.main-content {
  position: relative;
  z-index: 100;
  height: 100vh;
  background-color: grey;  
 }
 
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;

  height: 200px;
  width: 100%;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class="wrapper">
  
  <div class="main-content" style="margin-bottom: 200px;">
    <h1>This is main content.</h1>
    <p>Scroll down to reveal footer!</p>
  </div>
  
  <div class="footer">
    <p>This footer.</p>
  </div>
  
</div>

【讨论】：

【解决方案3】：

假设这个出现在底部的元素是页脚标签。在这种情况下，它将是这样的： html:

<footer></footer>

在你的 CSS 中：

footer {
    position: fixed;
    bottom: 0;
    display: none;
}

然后你必须添加一个让页脚出现的类

.active {

display: block;

}

你的 jquery 会是这样的：

$(window).on('scroll', function () {
    if ($(this).scrollTop() > 50) {
        if (!$(footer).hasClass('active')) {
            $(footer).addClass('active');
        }
    } else {
        if ($(footer).hasClass('active')) {
            $(footer).removeClass('active');
        }
    }
});

【讨论】：