一旦页面滚动超过设定点,我现在会显示页脚,但是当用户滚动而不是仅仅显示在屏幕上时(例如它当前),它会显示.
有兴趣知道是否可以通过CSS过渡或最佳实践来实现.
实例
http://jsfiddle.net/robcleaton/3zh6h/
CSS
#footer {
background: black;
width: 100%;
height: 48px;
position: fixed;
z-index:300;
bottom: 0;
display: none;
}
#footer ul.navigation li {
float: left;
margin-right: 16px;
display: block;
}
JS
$(function(){
$(window).scroll(function() {
$('#footer').toggle($(document).scrollTop() > 100);
});
})
HTML
<div id="footer">
<div class="content-wrap">
<ul class="navigation">
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- content-wrap END -->
</div><!-- footer END -->
解决方法
您可以执行以下操作来使用CSS过渡
jQuery的
$(function(){
$(window).scroll(function(){
if($(document).scrollTop() > 100)
{
$('#footer').addClass("show");
}
else
{
$('#footer').removeClass("show");
}
});
})
CSS
然后,使用CSS,根据该show类的存在显示或隐藏页脚.我们可以使用css过渡来为变化设置动画
#footer
{
background: black;
width: 100%;
height: 0px;
position: fixed;
z-index:300;
bottom: 0;
overflow:none;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
}
#footer.show
{
height: 48px;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
}
正如您在上面看到的那样,我们在显示时会改变页脚的高度.溢出：无;当高度为0时,停止显示页脚的内容.
使用此方法,您还可以通过设置不透明度值或为颜色更改设置动画来淡入页脚.
JS小提琴：