Question

我正在尝试创建一个页脚，当您到达页面底部时，该页脚会向上滚动到与页面内容重叠的视图中。它有点像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;
}

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

});

欢迎反馈！

如何在页面到达结束时创建滚动到视图的页脚

1 个答案: