Question

我正在使用HTML 5以及jquery v1.8.2来触发事件，当您到达文章页面的末尾时弹出一个项目。虽然它运行良好，但我试图看看是否可以用数字调用（像素/百分比）替换触发器ID（#last）事件。

此代码旨在用于文章页面。当你走向文章末尾时，会弹出一个模态。目前，也有弹出的模态，它找到id（#last）的高度，并根据id为#last的元素的高度弹出。我要做的就是：不使用id来触发事件，而是使用数值。例如，当页面从顶部滚动66％时，触发弹出模式事件。

以下是代码：

$(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();
if  ($(window).scrollTop() > distanceTop)
$('#toolbar-btm-button').fadeIn('slow').animate({bottom: '0'},"slow");
else 
$('#toolbar-btm-button').animate({bottom: '-44px'},"fast");    
});
});

我尝试用像素和百分比值替换#last，但它似乎无法正常工作。这是我尝试过的，但没有用：

$(function() {
$(window).scroll(function(){
var distanceTop = $('66%').offset().top - $(window).height();
if  ($(window).scrollTop() > distanceTop)
$('#toolbar-btm-button').fadeIn('slow').animate({bottom: '0'},"slow");
else 
$('#toolbar-btm-button').animate({bottom: '-44px'},"fast");    
});
});

有什么建议吗？

Answer 1

尝试这样的事情：

$(function() {
    $(window).scroll(function() {
        var distanceTop = $('body').height() - $(window).height();
        if ($(window).scrollTop() > (distanceTop * 0.6)) {
            $('#toolbar-btm-button').fadeIn('slow').animate({
                bottom: '0'
            }, "slow");
        } else {
            $('#toolbar-btm-button').animate({
                bottom: '-44px'
            }, "fast");
        }
    });
});

jquery - 将ID引用更改为数值

1 个答案: