jquery - 如何创建在页面到达末尾时滚动到 View 中的页脚

Question

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

我的网站目前是这样的，但设计者要求新版本按上述方式工作。基本上页面停止滚动，页脚滚动到与页面重叠的 View 中。我发现了很多关于动画的东西，但我希望它只是可滚动且简单，没有 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;
}

Answer 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 {}

});

欢迎反馈!