如何创建在页面到达末尾时滚动到视图中的页脚
如何创建在页面到达末尾时滚动到视图中的页脚
提问于 2016-09-02 22:33:45
我正在尝试创建一个页脚，当您到达页面底部时，它会滚动到与页面内容重叠的视图。它有点像这个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;
}回答 1
Stack Overflow用户
发布于 2016-09-11 00:39:43
好吧，所以我不确定我最初想要的东西是否可能像我最初想的那样。我最终采用了动画方法，但它的播放方式并不像我想象的那样像动画一样。
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 {}
});欢迎反馈！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39294932
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号