CSS/html-使页脚仅在滚动后可见？是否粘贴到可见页面区域下方的底部？

好的，我完全遵循了这个链接，并尝试实现一个稍微改变的效果-

我已经让我的页脚贴在我的页面底部与此代码

*{
保证金：0；
}
html，正文{
身高：100%；
}
.页脚{
背景色：白色；
不透明度：0.8；
文本对齐：居中；
}
.包装工：之后{
内容：“；
显示：块；
}
.footer、.wrapper:之后{
/*。推压高度必须与页脚高度相同*/
高度：142px；
}
.包装纸{
背景#50a3a2；
背景：-webkit线性梯度（左上角，#50a3a2 0%，#53e3a6 100%）；
背景：线性梯度（至右下角，#50a3a2 0%，#53e3a6 100%）；
/*
位置：绝对位置；
最高：0%；
左：0；
宽度：100%；
身高：100%；
边际上限：0px；
*/
溢出：滚动；
z指数：-1；
身高：100%；
最小高度：100%；
/*等于页脚高度*/
边缘底部：-142px；
}

欢迎回来。
页脚

首先，您可以使用jQuery进行页面滚动检测

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
            $(".footer").addClass("show-footer");
        } else {
            $(".footer").removeClass("show-footer");
        }
    });
});

现在，您需要一个css类“show footer”作为footer div

.show-footer {
    visibility: visible;
    position: fixed;
    bottom: 0;
}
.footer {
    visibility: hidden;
}

---

如果你真正需要的是一个固定高度的页脚，它正好贴在窗口的初始底边下方（直到添加了足够的内容将其进一步向下推），那么这似乎就达到了目的

您只需将包装的最小高度设置为

100%

，再加上页脚的高度（在本例中），即可扩展其背后的背景<代码>计算（）可以为您确定总数

如果你不需要背景，它会变得更简单，你可以删除所有

：after

和负保证金业务，只需将最小高度设置为

100%

$（“#添加”）。在（“单击”，函数（）{
$（“Pellentesque居住者morbi tristique Sentectas.
”）。后面插入（“#添加”）；
});
*{
保证金：0；
}
html，正文{
身高：100%；
}
.包装纸{
背景：线性梯度（至右下角，#50a3a2 0%，#53e3a6 100%）；
最小高度：计算（100%+142px）；
边缘底部：-142px；
}
.包装工：之后{
显示：块；
内容：“；
高度：142px；
}
.页脚{
背景色：白色；
不透明度：0.5；
高度：142px；
文本对齐：居中；
}

欢迎回来。
添加内容

页脚
您可以使用jquery scroll实现此目的。我刚刚添加了一些虚拟文本以启用页面上的滚动

JavaScript:

$(window).on("load", function() {
  var position = $('.wrapper').scrollTop();

  $('.wrapper').scroll(function() {
    var scroll = $('.wrapper').scrollTop();
    if (scroll > position) {
      $('.footer').removeClass('hide');
    } else if (scroll == 0) {
      $('.footer').addClass('hide');
    }
    position = scroll;
  });
});

添加CSS:

.hide {
  display: none;
}

JSFIDLE:
您可以创建一堆代码吗。