当您到达屏幕底部或附近时,我正在尝试使元素淡入。
我目前的问题是,只有当您绝对位于屏幕上的最后一个像素时,脚本才会运行。例如,如果向上 3 像素,则动画将不会显示,并且会留下空白区域。
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#contact-form').css('opacity','1');
}
});
如果距离底部 x
像素,我想让动画开始。 x
将由 div 的高度确定。所以:
var x = $('#contact-form').height();
当用户滚动到距离页面底部 x px
时,如何启动 jQuery?
最佳答案
ThePendulum 来自#web 这里!
从顶部滚动的距离可以通过$(document).scrollTop()计算出来。要获得相对于文档底部滚动的距离,可以用文档的高度减去从文档顶部滚动的距离。
$(document).height() - $(document).scrollTop();
但是,一旦 View 框架的底部碰到文档的底部,浏览器就会停止滚动。然后,您只需滚动到文档顶部与 View 框架顶部之间的距离。
要获取文档底部与 View 框架底部之间的距离,还必须从滚动距离中减去 View 框架的高度。
Math.floor($(document).height() - $(document).scrollTop() - $(window).height());
然后,您可以简单地在滚动时检查此值,并在距离底部一定距离处触发您希望发生的任何事情。
$(document).on('scroll', function() {
var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());
if(distanceFromBottom < 200) {
// We're less than 200 pixels away from the bottom!
}
});
关于jquery - 根据距窗口底部的距离运行 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30329703/