0

我正在使用 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");    
});
});

有什么建议吗？

4

1 回答 1

0

尝试这样的事情：

$(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");
        }
    });
});​
于 2012-10-15T17:21:53.223 回答