这看起来非常简单,但我试图让一个固定位置的页脚div滑动&当用户滚动到网页的最底部然后滑动&当用户向上滚动时淡出。我搜索过Stack Overflow,其他人已经建议了解决方案,但是我的代码导致我的div只能滑动&淡入。我不能让div滑动&当用户向上滚动时淡出。
此外,这个div幻灯片&在我开始滚动后立即淡入。我需要它等到它到达页面的底部(或者我可以放在页面底部的一个不可见的div),然后我的固定位置div滑动&淡出。
有什么建议吗?
jQuery的:
$(function() {
$('#footer').css({opacity: 0, bottom: '-100px'});
$(window).scroll(function() {
if( $(window).scrollTop + $(window).height() > $(document).height() ) {
$('#footer').animate({opacity: 1, bottom: '0px'});
}
});
});
HTML:
<div id="footer">
<!-- footer content here -->
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
z-index: 26;
}
答案 0 :(得分:6)
我想我会尝试这样做。
http://jsfiddle.net/lollero/SFPpf/3
http://jsfiddle.net/lollero/SFPpf/4 - 更高级的版本。
JS:
var footer = $('#footer'),
extra = 10; // In case you want to trigger it a bit sooner than exactly at the bottom.
footer.css({ opacity: '0', display: 'block' });
$(window).scroll(function() {
var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
documentHeight = $(document).height();
console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )
if( scrolledLength >= documentHeight ) {
footer
.addClass('bottom')
.stop().animate({ bottom: '0', opacity: '1' }, 300);
}
else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {
footer
.removeClass('bottom')
.stop().animate({ bottom: '-100', opacity: '0' }, 300);
}
});
HTML:
<div id="footer">
<p>Lorem ipsum dolor sit amet</p>
</div>
CSS:
#footer {
display: none;
position: fixed;
left: 0px;
right: 0px;
bottom: -100px;
height: 100px;
width: 100%;
background: #222;
color: #fff;
text-align: center;
}
#footer p {
padding: 10px;
}