Jquery 滚动函数排除可变高度
Jquery scroll function exclude variable height
我有一个响应式网站,所以页脚高度是可变的。
滚动函数在页面底部触发以扩展内容(无限滚动),但这需要在底部减去页脚高度。
$(window).scroll(function() {
if ( $(window).scrollTop() == $(document).height() - $(window).height() ) {
alert('fire!');
}
});
这段代码适用于底部,我在这里找到的解决方案的问题是 if 语句两次为真,因为运算符是:高于或等于 (>=) 而不是 (==)。所以它被触发两次,超时将无法解决。
$(window).scroll(function() {
scrollDistance = $(window).scrollTop() + $(window).height();
footerDistance = $('footer').offset().top;
if (scrollDistance >= footerDistance) {
alert('fire!');
}
})
这是我在这里找到的解决方案,但不是很好,它正在执行双重警报。
我还尝试了以下代码:
$(window).scrollTop() == $(document).height() - $(window).height() - $('footer').height();
$(window).scrollTop() == ($(document).height() - $('footer').height()) - $(window).height();
添加了一个标志 hasEventBeenFired 并在事件被触发后将其设置为 true。要再次触发它,您需要在某些事件上再次使值为 false。
var hasEventBeenFired = false;
$(window).scroll(function() {
scrollDistance = $(window).scrollTop() + $(window).height();
footerDistance = $('footer').offset().top;
if (scrollDistance >= footerDistance && !(hasEventBeenFired)) {
hasEventBeenFired = true;
alert('fire!');
}
})
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- ExtJS——在展开/折叠时调整面板高度
- 分析高度属性时出现意外值{{specs.height}}.index.html
- 单击页面上的链接后高度发生变化
- Sencha Touch构建-排除文件
- 不加载宽度和高度的角度pintura
- 查找元素高度,包括边距
- 如何自动调整标签的高度以适应内容
- Javascript高度问题
- 使用JavaScript根据窗口/视口的高度动态调整图像大小
- 如何计算每个元素's的高度,并将这些值用作函数中的变量
- 如果宽度是百分比,如何设置以px为单位的图像高度
- 通过jquery设置最小高度
- 文档就绪提供了错误的选择器高度
- 如何为排除无穷大和NaN的数字声明Flow类型
- 调整缩放窗口高度提升缩放
- JS条件故障排除
- 根据图像高度添加类
- Jquery 滚动函数排除可变高度
- Jquery ajax 无限滚动排除页脚高度