偏移顶部不返回预期值

时间:2012-02-05 07:03:58

标签: jquery

$(window).scroll(function(e){
    if($(this).scrollTop()>=400)    $('#jtop').show('slow');
    if($(this).scrollTop()<400) if($('#jtop').width()) $('#jtop').hide('slow');
});

我正在使用该功能来确定是否有人向下滚动400以上切换图像并且它工作正常但是当我尝试通知如果某人到达我的页脚的顶部位置时它不会返回预期值。我使用了offset()。top但是当我向下滚动到底部0时它会提醒我。我只是想知道用户何时进入和离开我的页脚。希望有人能帮助我。提前致谢。 如果您想看到它的实际效果,那么这里是链接heera.it

非工作代码

    var ftop=$('#footer').offset().top;
    $(window).scroll(function(e){
        if($(this).scrollTop()>=400)
        {
            $('#jtop').show('slow');
        }
        if($(this).scrollTop()<400)
        {
            if($('#jtop').width()) $('#jtop').hide('slow');
        }
        if($(this).scrollTop()>=ftop)   console.log('true');
        if($(this).scrollTop()<ftop)    console.log('false');
    });

2 个答案:

答案 0 :(得分:1)

这对你有用。这是Chris的回答,只是用您的代码格式化。如果你快乐,请接受他。

http://jsfiddle.net/eL4HR/

var ftop = $('#footer').offset().top;
$(window).scroll(function(e) {
    if ($(this).scrollTop() >= 400) {
        $('#jtop').show('slow');
    }
    if ($(this).scrollTop() < 400) {
        if ($('#jtop').width()) $('#jtop').hide('slow');
    }
    if ($(this).scrollTop() + $(this).height() >= ftop) console.log('true');
    else console.log('false');
});

答案 1 :(得分:0)

这只是猜测,但您的页脚的顶部位置可能已经正确计算,因此在计算页脚是否已到达时将涉及计算滚动高度是否视口高度在一起到达页脚的顶部位置。

那有道理吗?如果页脚的顶部位置是1000px,则窗口的滚动高度以及视口的高度将告诉我们是否已到达页脚。我错误地试图将只是等于滚动高度值,这只会显示页脚是否完全到达屏幕顶部。

所以对某些代码:

var footer_top = $("#footer").position().top;

$(window).scroll(function(e) {

    var scroll_top = $(this).scrollTop();
    var viewport_height = $(this).height();

    if (scroll_top + viewport_height >= footer_top) {
        alert("Footer reached!");
    }

});

希望这有帮助并且有意义!