Question

好的，我已经完全按照这个链接尝试实现略有改变的效果 - https://css-tricks.com/snippets/css/sticky-footer/

我已经使用此代码将页脚粘贴到页面底部

＆＃13;

* {
  margin: 0;
}
html, body {
  height: 100%;
}

.footer{

  background-color: white;
  opacity: 0.8;
  text-align: center;
}
.wrapper:after {
  content: "";
  display: block;
}
.footer, .wrapper:after {
  /* .push must be the same height as footer */
  height: 142px; 
}

.wrapper {
  background: #50a3a2;
  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  /*
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  */
  overflow: scroll;
  z-index: -1;
  height: 100%;
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}

＆＃13;

<div class="wrapper">
  <h1 class="headertext">Welcome back.</h1>
</div>
<div class="footer">Footer</div>

＆＃13;

但是我需要我的页脚粘贴到可见页面区域下面的页面底部，类似于你必须在堆栈上滚动才能看到底部的黑色页脚栏。如果您一直滚动到顶部，我不希望页脚可见 - 即使只有标题，用户也必须滚动才能看到页脚粘在底部。

我不知道如何做到这一点，因为我已经将包装器的高度设置为100％ - 理论上应该占用整页并推开页脚。

如何将页脚粘贴到页面底部PAST最初可见的页面部分（即在向下滚动之前不可见）？

Answer 1

如果您真正需要的是一个固定高度的页脚，它紧贴在窗口的初始底部边缘下方（直到添加足够的内容以将其向下推进），这似乎可以解决问题。

您只需要将包装器的最小高度设置为100%，再加上页脚高度（在这种情况下），以扩展其背后的背景。 calc()可以为您确定总数。

如果你不需要背景来做到这一点，那就更简单了，你可以删除所有:after和负边距业务，只需将最小高度设置为100%

＆＃13;

$("#add").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus.</p>").insertAfter("#add");
});

＆＃13;

* {
  margin: 0;
}

html, body {
  height: 100%;
}

.wrapper {
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  min-height: calc(100% + 142px);
  margin-bottom: -142px;
}

.wrapper:after {
  display: block;
  content: "";
  height: 142px;
}

.footer {
  background-color: white;
  opacity: 0.5;
  height: 142px;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="headertext">Welcome back.</h1>
  <p><button id="add">Add Content</button></p>
</div>
<div class="footer">Footer</div>

＆＃13;

Answer 2

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

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

jsfiddle：http://jsfiddle.net/nikdtu/g3svmoqq/

Answer 3

首先，您可以使用jQuery进行页面滚动分解

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

现在你的页脚div需要一个css类“show-footer”

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

CSS / html - 滚动后只能看到页脚？坚持在可见页面区域下方的底部？

3 个答案: