如果元素位于屏幕顶部,则在JQuery中进行测试

Question

我有一个div位于浏览器窗口顶部约100px的位置.当用户向下滚动时,我希望div它保持原样直到它到达屏幕顶部.然后,我将使用JQuery更改一些CSS以使位置更改为固定并将margin-top设置为0.如果div在屏幕顶部,我如何在JQuery中进行测试？

Answer 1

var distance = $('div').offset().top,
    $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
        // Your div has reached the top
    }
});

PS为了获得更好的性能,您应该限制滚动事件处理程序.
查看John Resig的文章:从Twitter学习.

Answer 2

嘿，你可以这样：

var distance = $('.yourclass').offset().top;

$(window).scroll(function() {
    if ( $(this).scrollTop() >= distance ) {
        console.log('is in top');
    } else {
        console.log('is not in top');
    }
});