如何创建页面到达末尾时滚动到视图中的页脚答案

【问题标题】：How do I create a footer that scrolls into view when page reaches the end如何创建页面到达末尾时滚动到视图中的页脚
【发布时间】：2017-01-10 17:16:01
【问题描述】：

我正在尝试创建一个页脚，当您到达页面底部时，该页脚会向上滚动到与页面内容重叠的视图中。这有点像Codepen by devkick的反面@

我的网站目前是这种方式，但设计师要求新版本能够按上述方式工作。基本上页面停止滚动，页脚滚动到与页面重叠的视图中。我发现了很多关于动画的东西，但我希望它可以滚动且简单，没有 jquery 动画。我也查看了视差效果，但它们似乎都是相同的隐藏页脚，因为页面不碍事而显示出来。

这是我当前的页脚设置

<div class="wrapper">
<div class="innerWrapper">
  <!--all the content!-->
</div>
</div>
    <footer>
        <div class="innerFooter">
            <!--all the content!-->
        </div>
    </footer>

还有我的一些页脚css

//wrapper for everything but footer
.wrapper {
    position:relative;
    z-index:3;
    background-color: #fff;

}

//wrapper for internal content
.innerWrapper {
    text-align: center;
    width: 100vw;
}
footer {
  height: 380px;
  color:$white;
  font-size:12px;
  position:relative;
  z-index:0;
  background-color:$black;
}

footer .innerFooter {
  position: fixed;
  left: 1%;
  right: 1%;
  bottom: 1em;
  z-index: 1;
}

【问题讨论】：

这里可以使用 jQuery 吗？你有它的标签，但你的问题说你不想要它。我严重怀疑没有 JS 是可能的。
jQuery 在这里是免费游戏，但我不想让它动画化。但如果没有其他选择，我可能不得不这样做。

标签： jquery css footer parallax

【解决方案1】：

好的，所以我不确定我最初想要的是否会按照我最初的想法实现。我最终采用了动画方法，但它的播放方式并不像我想象的那样像动画。

var homePage = $('.homeWrap').length;

$(window).scroll(function(){
  if (homePage === 0) {
    var footerHeight = $('footer').height();

  if ($(window).scrollTop() + $(window).height() >= $(document).height() - 0)
    {
        if($('footer').data('size') == 'hide')
        {
            $('footer').data('size','show');
            $('footer').css('visibility', 'visible');
            $('footer').stop().animate({
                bottom:'0px'
            },400);
        }
    } 
    else
    {
        if($('footer').data('size') == 'show')
        {
            $('footer').data('size','hide');
            $('footer').stop().animate({
                bottom: '-'+footerHeight
            },400);

        }  
    }
  } else {}

});

$(document).ready(function() {
  if (homePage === 0) {
    var body = document.body,
    html = document.documentElement;
    $('footer').data('size','show');
    if ($('.innerWrapper').offsetHeight >= html.offsetHeight)
    {
        $('footer').data('size','hide');
    }
    else
    {
        $('footer').data('size','show');
        $('footer').stop().animate({
                bottom:'0px',
                visibility: 'visible'
            },400, function() {

            });
    }
  } else {}

});

欢迎反馈！

【讨论】：