我已经用 JQuery 设计出了一个解决方案。它非常简单。
HTML:
<div id='leftimage' class='sideImage' style='left:0px;'>
<img src='playleft.png' style='width:100%;'>
</div>
<div id='rightimage' class='sideImage' style='right:0px;'
<img src='playright.png' style='width:100%;'>
</div>
<footer id='footer'>Footer content here</footer>
CSS:
.sideImage {
position:fixed;
bottom:100px;
width:275px;
}
JQuery:
$(document).scroll(function(){
repositionSideImages();
});
$( window ).resize(function() {
repositionSideImages();
});
$(document).ready(function() {
repositionSideImages();
});
function repositionSideImages() {
var footer = $("#footer");
var footerTop = $(footer).offset().top;
var scrollTop = $(document).scrollTop();
var windowHeight = $(window).height();
var windowBottom = scrollTop + windowHeight;
repositionImage($("#leftimage"), windowBottom, footerTop, footer.height());
repositionImage($("#rightimage"), windowBottom, footerTop, footer.height());
}
function repositionImage(image, windowBottom, footerTop, footerHeight) {
if (windowBottom >= footerTop) {
$(image).css({"position":"absolute", "bottom":footerHeight});
}
else {
$(image).css({"position":"fixed", "bottom":"0px"});
}
}
这其实很简单。当文档加载、滚动或调整窗口大小时,计算窗口底部位置。如果此点低于页脚顶部,则[部分]页脚在视口内,图像设置为绝对定位,底部设置为页脚高度,因此它们似乎粘在页脚上。否则,如果窗口底部点在页脚顶部之上,则页脚不在视口内,图像设置为固定定位,因此它们浮动在屏幕底部。
这非常平稳,因为没有每像素重新定位图像,只有在页脚越过窗口底部的边界时才交换它们的位置和底部属性。
这应该与JQuery的其他部分一样跨浏览器,因为它不使用任何神奇的东西。