我有这个问题很可能很容易解决，但我是 JS/JQuery 的新手。 我有这段代码(请参阅此处的 fiddle :https://jsfiddle.net/Tiph/6ep3hp4j/)，当滚动到达文档底部时我的 div 页脚显示，但我希望它显示当滚动到达标题下方的特定高度并固定位置在我的窗口底部。我知道我必须用 window.height 和/或 offsetTop 计算一些东西，但没有任何效果。 有人可以帮我吗？ 太感谢了! :-)
我的代码在这里:
var footer = $('#footer'),
extra = 10;
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);
}
});
最佳答案
我创建了新的示例代码以供您了解其工作原理
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
var count=700;
var menuHeight = $('#footer').height()+count;
var top = $(this).scrollTop();
var bottom = $(document).height() - $(this).height() - $(this).scrollTop();
if (bottom < menuHeight) {
$('#footer').removeClass( 'top' );
$('#footer').addClass( 'bottom' );
$('#footer').fadeIn( 'slow' );
}
else {
$('#footer').fadeOut( 'slow' );
}
});
});
</script>
<meta charset="utf-8">
</head>
<body>
<style>
#footer{
width: 100%;
height: 60px;
background-color: #cccccc;
vertical-align: middle;
text-align: center;
font-size:3em;
}
.bottom{
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
display:block;
}
</style>
<div style="height:2000px;"></div>
<div id="footer" style="display:none" > This is your footer</div>
<div style="height:700px"></div>
尝试更改数字 700 以设置要显示页脚的位置
关于javascript - 滚动时如何淡入窗口底部的div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35982199/