CSS/html - 使页脚仅在滚动后可见?坚持在可见页面区域下方的底部? [英] CSS/html - make footer ONLY visible after scroll? stick to bottom just below visible page area?

问题描述

好的，我完全按照此链接进行操作，并试图实现稍微改变的效果 - https://css-tricks.com/snippets/css/sticky-footer/

我已经用这段代码让我的页脚粘在我的页面底部

* {边距:0；}html，正文{高度:100%；}.页脚{背景颜色:白色；不透明度:0.8；文本对齐:居中；}.wrapper:后{内容: "";显示:块；}.footer, .wrapper:after {/* .push 必须与页脚高度相同 */高度:142px；}.包装{背景:#50a3a2；背景:-webkit-linear-gradient(左上角，#50a3a2 0%，#53e3a6 100%)；背景:线性渐变(到右下角，#50a3a2 0%，#53e3a6 100%)；/*位置:绝对；顶部:0%；左:0；宽度:100%；高度:100%；边距顶部:0px；*/溢出:滚动；z-索引:-1；高度:100%；最小高度:100%；/* 等于页脚高度 */底边距:-142px；}

<h1 class="headertext">欢迎回来.</h1>
<div class="footer">Footer</div>

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

我不知道该怎么做，因为我已经将包装器的高度设置为 100% - 理论上它应该占据整个页面并推动页脚.

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

解决方案

您可以为此使用 jquery scroll.我刚刚添加了一些虚拟文本以启用页面滚动.

JavaScript:

$(window).on("load", function() {var position = $('.wrapper').scrollTop();$('.wrapper').scroll(function() {var scroll = $('.wrapper').scrollTop();如果(滚动>位置){$('.footer').removeClass('hide');}否则如果(滚动== 0){$('.footer').addClass('hide');}位置 = 滚动；});});

添加的CSS:

.hide {显示:无；}

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

Ok, I have followed this link exactly and a trying to achieve a slightly altered effect - https://css-tricks.com/snippets/css/sticky-footer/

I have gotten my footer to stick to the bottom of my page with this code

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

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

however I need my footer to stick to the bottom of the page BELOW the visible page area, similar to how you have to scroll here on stack to see the black footer bar at the bottom. I don't want the footer to be visible if you are scrolled all the way to the top- even if there is only a header, the user should have to scroll to see the footer stuck to the bottom.

I don't know how to do this as I already set the height of my wrapper to 100% - it should be taking up the whole page and push the footer off in theory.

How can I stick my footer to the bottom of page PAST the part of the page that is initially visible (i.e. not visible until scrolled down to)?

解决方案

You can use jquery scroll for that purpose. I have just added some dummy text to enable scroll on page.

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

Added CSS :

.hide {
  display: none;
}

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

这篇关于CSS/html - 使页脚仅在滚动后可见?坚持在可见页面区域下方的底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！