Question

我有一个div，里面会有几张图片。当用户滚动到图像的顶部或底部边缘即将被父div隐藏的点时，我希望图像消失。结构是这样的：

<div class="parent">
   <img/>
   <img/>
</div>

我的目标是让图像的顶部或底部边缘开始被父div隐藏时淡出，然后在滚动到完整视图时让它淡入。

我正在使用jQuery并收听div滚动事件来检查img offset().top，一旦它遇到不在视图中的顶部值，我就会隐藏图像。

但这似乎占用了大量的cpu时间，因为我必须使用每个滚动事件迭代图像。最重要的是，即使我在hide()上调用img，它根本不会隐藏它（只是为了确保它被调用而设置了一个断点，它就是这样）。有没有准确的方法来做到这一点？

编辑：感谢mcpDESIGNS，我需要使用position()代替offset()。此外，由于hide()设置为display，因此none似乎不起作用。所以我切换到visibility:hidden，它按预期工作。

EDIT2：就像一张纸条，这是我正在使用的js，几乎是mcpDesigns的建议

旧

var display = $("div");

display.scroll(function () {

    var avatars = $("div > img");
    console.log("************************");
    avatars.each(function (index) {
        console.log($(this).offset().top);

        if ($(this).offset().top < 40)
            $(this).hide();
        else {
            $(this).show();
        }
    });
});

新

var display = $("div");

display.scroll(function () {

    var avatars = $("div > img");
    console.log("************************");
    avatars.each(function (index) {
        console.log($(this).position().top);

        if ($(this).position().top < 0)
            $(this).css("visibility", "hidden")//.hide();
        else {
            $(this).css("visibility", "")//.show();
        }
    });
});

Answer 1

您需要根据每张图片进行大量计算，以及它的位置是负（表示父级可滚动div的顶部），还是与相同的＃可滚动div的高度。

$('.parent').scroll(function () {            
    console.log($('img').position().top);

    // if ( negative top position || same#asDivheight) { fadeIn / out, etc }
});

玩弄它，但这基本上就是它的主旨。

Answer 2

我想出了一种你认为合适的方式。

代码：

// initialize
var limit = 0;
var timeout;

var scrollCallback = function() {
    limit = 0;
    clearTimeout(timeout);

    // TODO: calculations and hide/show images
}

$(window).scroll(function(e) {
    limit++;
    if (limit > 50) {
        scrollCallback();
    }
    clearTimeout(timeout);
    timeout = setTimeout(scrollCallback, 500);
});

在您获得50个滚动事件之前，此代码不会触发回调。此外，如果未达到50，则会在500毫秒后触发。这可能会帮助您解决性能问题。

Answer 3

这里有一个小小的谜语：http://jsfiddle.net/BerkerYuceer/35P2e/

$('.parent img').mousemove(function (e) {
    var y = e.pageY - this.offsetTop;
    if (y == $(this).position().top || y == $(this).height()-2)
    {
        alert($(this).position())
        $(this).hide();
    }else 
    {
        $(this).show();
    }
});

-2是捕捉元素真实高度的边界高度..祝你好运..

检测图像何时滚出视图

3 个答案: