4

我有一个 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();
        }
    });
});
4

3 回答 3

4

您需要根据每个图像以及它的位置是否为负数（即父可滚动 div 的顶部）或与可滚动 div 的高度相同的 # 进行大量计算。

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

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

玩弄它，但这基本上就是它的要点。

于 2012-09-26T18:57:53.663 回答
1

我想出了一个你可能会觉得合适的方法。

代码：

// 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 毫秒后触发。这可能会帮助您解决性能问题。

于 2012-09-26T19:24:07.963 回答
0

这里有一个小 jsfiddle 供您欣赏：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 是捕捉元素真实高度的边框高度.. 祝你好运..

于 2012-09-26T19:32:06.477 回答