问题描述
我想知道是否可以检测到一个元素的css属性position:fixed;在滚动时跨越另一个元素。我的目标是防止固定的位置div跨越不同高度的页面上的静态定位的页脚,当在较小的屏幕上观看时,页脚高度可能改变。
I'm wonder if its is possible to to detect when an element with the css property position: fixed; crosses over another element while scrolling. My goal is to prevent a fixed position div from ever crossing over a statically positioned footer across pages of varying height, also the footer height may change when viewed on a smaller screen.
理想情况下,固定/可滚动div将位于距离窗口底部20像素处,然后当用户滚动到页脚时,它将保持位于页脚上方20px。
Ideally the fixed/scrollable div would be positioned say 20px from the bottom of the window, then when a user scrolls to the footer it would stay positioned 20px above the footer.
推荐答案
$(window).scroll(function () {
if ($(".fixedposition").offset().top < ($(".footer").offset().top - 30)) {
$(".fixedposition").css("top", "30px");
$(".fixedposition").css("display", "block");
} else {
$(".fixedposition").css("display", "none");
}
});
请参阅fiddle here:
see fiddle here: http://jsfiddle.net/flish/T6x4R/
当然你应该做一些不是set display:none;
为您的固定div
Of course you should probably do something else other than set display:none;
for your fixed div
这篇关于检测时的位置:固定;元素跨越另一个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!