2

我有一个 CSS 动画，当页面在浏览器中时，我想运行它。我正在使用 true 或 false 函数来获取位置（称为“posish”）。我可以在页面出现时运行一​​次，或者当 posish 为 true (13900) 时运行一次，但我也想在 posish 变为 false 时再次运行一次。

我的问题是，如果我将它设置为 true 和 false 都运行动画，动画会在您滚动时连续运行，而我只希望它为每个实例运行一次，直到实例变为相反。另外，我有两个类运行相同的动画，所以我可以添加和删除。我希望这是有道理的！这是我的代码：

if (posish(13900)) {    
    $('.shadow').removeClass('shrink-2');   
    $('.shadow').addClass('shrink-1');
} else {
    $('.shadow').removeClass('shrink-1');
    $('.shadow').addClass('shrink-2');  
}

这是 posish 函数的代码

function posish(pos) {
    pos-=19;
    if (scrolled-viewport/4 < pos) {
        return false;
    } else if (scrolled > pos+viewport/2) {
        return true;
    } else {
        return (scrolled-viewport/4-pos)/(viewport/4);
    }
}

如果您需要更多信息，请告诉我。谢谢你的帮助！

4

1 回答 1

1

好的，这是我为演示一些代码而制作的小提琴：

http://jsfiddle.net/3XbTG/

如果您运行它并查看控制台，您会看到它成功地测试了这两个 posish 值。

我认为您想要做的是查看“pos”是否大于总视口高度的 1/4（高度 + 滚动位置 - 19）

第一个问题是你想在每次运行函数时获取viewport和的值。scrolled

第二个问题是你应该只运行一个测试，并从中返回值。您的函数返回布尔值或数字，这令人困惑。

function posish(pos) {
    var viewport = $(window).height();
    var scrolled = $('body').scrollTop();
    var totalHeight = scrolled + viewport - 19;
    return (totalHeight / 4 < pos);
}
于 2013-05-16T10:33:10.430 回答