这看起来相当简单,但我试图让固定位置的页脚 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;
}
感谢您的帮助!
我想我会尝试做这样的事情。
http://jsfiddle.net/lollero/SFPpf/3 http://jsfiddle.net/lollero/SFPpf/3
http://jsfiddle.net/lollero/SFPpf/4 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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)