[英]change css class based on scroll position
我有以下HTML
<header class="fixed">...</header>
<div id="content">
<div id="sidemenu" class="fixed">...</div>
<div id="scroll">...</div>
</div>
<footer class="fixed">...</footer>
在CSS和规则中具有各种定位规则
.fixed {
position: fixed;
}
这仅实现具有id滚动移动的div的预期效果。 但是,这可能会使页脚看不见。
我想做的是,一旦div的底部到达页脚的底部,将position: fixed
更改为position: absolute
,然后所有内容将一起滚动以显示页脚。
但是我不知道该怎么做。 我当时在看航路点,但有点不知所措。
这样的事情应该可以解决您的问题。 尝试这个:
$(window).scroll(function () {
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
if (scrollBottom <= $("footer").height()) {
$("footer").css("position", "absolute");
}
else {
$("footer").css("position", "fixed");
}
});
为此,您将拥有“ onScroll”事件。 并检查滚动div的坐标是否与页脚的坐标匹配。 一旦它们匹配,就在处理程序的实现中将位置更改为“绝对”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.